Question

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

但是，如果我希望最后一个列表项正确对齐。如果没有使用浮动，有没有一个好方法呢？

Answer 1

您可以使用psudeo-element ::before来清除浮动。使用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>

Answer 2

不使用浮动，你可以这样做：

li:last-child {
    position: absolute;
    right: 10px;
}

Fiddle here

P.S如果您想将最后一个项目放在更靠近另一个项目或更接近边界的位置，您可以更改“右侧”的值

右对齐几个内联块的最后一个

2 个答案: