html - 头部如何向左显示

Question

我试图在此处显示 channel 列表每一行左侧的字母。我该怎么做？

<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>

到目前为止，我是如何得到它的。我需要每行左侧的“A”、“B”、“C”。请指教!

Answer 1

删除 align="center"来自 <h1>并添加 text-align: left

试试这个

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