在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;
}

第一行是正确对齐的，但是，以下行是缩进的。

以下是截图：

当我通过右对齐替换浮动时：

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

Answer 2

原始问题的答案

当您想清除浮动项目时，您真的不需要::after伪类，您可以执行以下操作：

.trash-icon {
    float: right;
    clear: both;
}

这是一个例子：

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

<li>
  <div class="list-item">
    <span>SPAN 1</span>
  </div>
  <div class="trash-icon">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
  </div>
</li>

<li>
  <div class="list-item">
    <span>SPAN 2</span>
  </div>
  <div class="trash-icon">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
  </div>
</li>

<li>
  <div class="list-item">
    <span>SPAN 3</span>
  </div>
  <div class="trash-icon">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
  </div>
</li>

Answer 3

您是否尝试使用text-align

替换.trash-icon float