无序列表 - 第一个列表项目位于

Question

有人知道为什么第一个li项目在其位置被提升。它只会在我向div添加id或class时发生。

这是代码：

<div id="pickList">
    <ul *ngFor="let channel of currentPickSelection">
      <li class="list-group-item" style="float:Left;margin:1px;" (dragover)="onDragOver(channel[0])" (drop)="onDrop()"
      [ngStyle]="{'background-color': channel[0].compChannel[0].compChannelLogo.length !== 0 ? '#8EC0D1' : 'aliceblue' }">
        <ng-container *ngIf="channel[0].compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
          <img class="img-rounded" src="{{ channel[0].logo }}" alt="{{ channel[0].channel }}" width="50" height="50">
          <img class="img-rounded" src="{{ channel[0].compChannel[0].compChannelLogo }}" alt="{{ channel[0].compChannel[0].compChannelName }}"
            width="50" height="50">
        </ng-container>
        <br>
        <div align="center">
          <strong>
            <font size="2">{{ channel[0].pickCode }}</font>
          </strong>
        </div>
      </li>
    </ul>
  </div>

这是CSS：

#pickList {
  height:565px;
  scroll-behavior: auto;
  overflow:auto;
}

Answer 1

我通过这种方式想出来，通过在

之间添加一个额外的div

 <div class="row pickList" align="center">
    <div>
      <ul *ngFor="let channel of currentPickSelection">
        <li class="list-group-item" style="float:Left;margin:1px;" (dragover)="onDragOver(channel[0])" (drop)="onDrop()" [ngStyle]="{'background-color': channel[0].compChannel[0].compChannelLogo.length !== 0 ? '#8EC0D1' : 'aliceblue' }">
          <ng-container *ngIf="channel[0].compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
            <img class="img-rounded" src="{{ channel[0].logo }}" alt="{{ channel[0].channel }}" width="50" height="50">
            <img class="img-rounded" src="{{ channel[0].compChannel[0].compChannelLogo }}" alt="{{ channel[0].compChannel[0].compChannelName }}"
              width="50" height="50">
          </ng-container>
          <br>
          <div align="center">
            <strong>
              <font size="2">{{ channel[0].pickCode }}</font>
            </strong>
          </div>
        </li>
      </ul>
    </div>
  </div>