Html ngFor中的右对齐图标<；il>；环

将创建项目列表并在右侧对齐图标

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

第一行已正确对齐，但以下几行已缩进

以下是一个屏幕截图：

当我将浮动替换为右对齐时：

---

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

---

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

---

原始问题的答案

您实际上不需要

：：在

伪类之后，当您想要清除浮动项时，您可以执行以下操作：

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

下面是一个例子：

。列表项{
宽度：300px；
显示：内联块；
}
.垃圾图标{
浮动：对；
明确：两者皆有；
}

跨度1


跨度2


跨度3

原始问题的答案

您实际上不需要

：：在

伪类之后，当您想要清除浮动项时，您可以执行以下操作：

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

下面是一个例子：

。列表项{
宽度：300px；
显示：内联块；
}
.垃圾图标{
浮动：对；
明确：两者皆有；
}

跨度1


跨度2


跨度3

是否尝试替换。垃圾图标浮动与文本对齐

是否尝试替换。垃圾图标浮动与文本对齐

问题是，当文本超过一行时，点被拆分为第二行line@infodev，这是因为您将

width:300px

设置为具有

列表项

类的元素，屏幕上没有足够的空间在一行中显示它。一个可能的解决方案是删除宽度：300px规则。问题是当文本超过一行时，点被分割到第二行line@infodev，这是因为您将

width:300px

设置为具有

列表项

类的元素，并且屏幕上没有足够的空间在一行中显示它。一种可能的解决方案是删除

width:300px

规则。