html - 右对齐几个内联 block 中的最后一个

Question

如果我有一个包含 5 个列表项的无序列表。列表项设置为 display: inline-block 以便它们水平堆叠，左对齐。

但是如果我想让最后一个列表项右对齐。有没有不使用 float 的好方法？

Answer 1

你可以使用伪元素 ::before清除 float 。使用 last-child 查看以下示例:

ul li {
  width: 100px;
  height: 50px;
  display: inline-block;
  background: red;
}
ul li:last-child {
  float: right;
}
ul li:last-child:before {
  content: '';
  clear: both;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>