html - ngFor <il> 循环中的右对齐图标

Question

将创建一个元素列表并在右侧对齐图标。

<ul class=" list">
   <li *ngFor="let group of groupList">
      <div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
      <div class="trash-icon">
          <img src="assets/img/icon_trash.png" height="20" width="20"/>
      </div>
    </li>
</ul>

在 CSS 中:

.list-item {
    width: 300px;
    display : inline-block;
}
.trash-icon {
    float: right;
} 
.trash-icon::after {
    clear: both;
}

第一行对齐正确，但后面的行缩进了。

截图如下:

当我用右对齐替换 float 时:

Answer 1

为此使用 flexbox 显示。

<ul class="list">
   <li *ngFor="let group of groupList">
      <div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
      <div class="trash-icon"><img src="assets/img/icon_trash.png" height="20" width="20"/></div>
    </li>
</ul>

你的风格

ul.list li {
  display: flex;
  justify-content: center;
}

ul.list li div.list-item {
  flex: 1 1 auto;
}

ul.list li div.trash-icon {
  flex: 0 0 20px;
}