代码之家  ›  专栏  ›  技术社区  ›  Sumchans

角度HTML格式错误

angular html
  •  1
  • Sumchans  · 技术社区  · 8 年前

    这是关于我昨天发布的问题 Link to yesterday's post 一切都正常,但现在无法打破争吵。如下图所示,“G”行有“H”和;“我”在同一行。只是尝试如何让每个字母表及其通道都在自己的行上。我也在底部附加了HTML。 请告知。 Screenshot of the result 

    <div class="w3-container w3-threequarter">
  <ul class="w3-ul w3-card-1" *ngFor="let head of channelDisplayHeads">
    <h1 align="center" style="background-color:#0083BC;">
      <font color="white">{{ head }}</font>
    </h1>
    <ng-container *ngFor="let channel of channelList">
      <li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
        <img class="w3-image" src="{{ channel.logo }}" align="center" alt="{{ channel.channel }}" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">{{ channel.cbsCode }}</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">{{ channel.pickCode }}</font>
        </span>
      </li>
    </ng-container>
  </ul>
</div>
    1 回复  |  直到 8 年前
        1
  •  1
  •   Kalaiselvan    8 年前

    上述问题的工作副本@Chris Happy和@Sumchans https://codepen.io/kalaiselvan/pen/xpGyzq 

    .w3-ul > h1{
width: 40px;
float: left;
}
.logoDisplay{
float: left;
}


.w3-ul > h1, .logoDisplay{
display: inline-block; // if need use !important
}
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">

<ul class="w3-ul w3-card-12" style="clear:both" >
   <h1 align="center" style="background-color:#0083BC;">
      <font color="white">heading</font>
    </h1>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
</ul>
<ul class="w3-ul w3-card-1" style="clear:both">
   <h1 align="center" style="background-color:#0083BC;">
      <font color="white">heading</font>
    </h1>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
</ul>
<ul class="w3-ul w3-card-1" style="clear:both">
   <h1 align="center" style="background-color:#0083BC;">
      <font color="white">heading</font>
    </h1>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
</ul>

</div>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    1 年前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    1 年前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号