如何向左显示头部

Question

我尝试在频道列表的每一行左侧显示字母。我该怎么做呢？

<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 align="center"><strong><font size="2">{{ channel.channel }}</font></strong></span><br> -->
          <span class="w3-left"><mark><font size="1">{{ channel.cbsCode }}</font></mark></span><span class="w3-sand w3-right" style="text-shadow:0.2px 0.2px 0 #444"><font size="2">{{ channel.pickCode }}</font></span>
        </li>
      </ng-container>
    </ul>
  </div>

到目前为止我是如何得到它的。我需要＆＃34; A＆＃34;，＆＃34; B＆＃34;，＆＃34; C＆＃34;在每行的左侧。请指教！

Answer 1

在每个标题行上，您只需要执行

text-align: left

在你的CSS中你的标题行应该是这样的

<h1 style="background-color:#0083BC; text-align:left;"><font color="white">{{ head }}</font></h1>

我刚刚在您已经拥有的内联样式的末尾包含了建议的样式。

也可能你不需要对齐：中心

修改

要将标题字母移动到通道行的左侧，您可以将它们浮动或使用flexbox

如果你坚持使用漂浮它们的简单解决方案，你只需要做

<h1 style="background-color:#0083BC; width:80px;float:left;"><font color="white">{{ head }}</font></h1>

我将宽度设置为80px，以防您希望它们与每个频道项目的当前宽度相匹配，但我建议将这些内联样式移动到专用类

然后在频道样式列表中

 .list-group-item {
    float:left;
 }

Answer 2

这一行：

<h1 align="center" style="background-color:#0083BC"><font color="white">{{ head }}</font></h1>

应该是：

<h1 style="background-color:#0083BC; text-align: left;"><font color="white">{{ head }}</font></h1>

即。添加text-align: left;删除align: center

Answer 3

从align="center"移除<h1>并添加text-align: left

试试这个

<h1 style="background-color:#0083BC; text-align: left"><font color="white">{{ head }}</font></h1>

Answer 4

以下是您的解决方案：

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

或者，

.w3-ul > h1, .logoDisplay{
display: inline-block; // if need use !important
}