Question

<div id="wrap" style="width:300px">
    <ul style="float:right">
        <li style="float:left">first</li>
        <li style="float:left">second</li>
        <li style="float:left">third</li>
        <li style="float:left">and the fourth is longer than the others</li>
    </ul>
</div>

https://jsfiddle.net/xLq1hfby/

我希望<li> s向右对齐：

                  [first] [second] [third]
[and the fourth is longer than the others]

但是，由于最后一个元素导致自动换行，它看起来像这样：

[first] [second] [third]
[and the fourth is longer than the others]

当删除最后一个<li>时，它们就像我想要的那样对齐，如下所示：

                  [first] [second] [third]

即使换行，我怎样才能使它们正确对齐？

请记住：

我无法在display:inline-block上使用<li>，因为我需要垂直边距。
我无法在float:right上使用<li>，因为这会改变他们的订单。

Answer 1

您可以将flexbox与以下设置一起使用（注意：没有浮动，'justify-content：flex-end;'将项目对齐到右边。）：

ul {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  list-style-type:none;
  margin:0;
  padding:0;
}

li {
  margin-right: auto;
  background:red;
  color:#fff;
  margin:4px;
}

这是你小提琴的一个分支：https://jsfiddle.net/0o93dvrp/

Answer 2

如果你想要一个非flexbox版本（内联块+文本对齐右键技巧） https://jsfiddle.net/sxLk5mt2/

/* toggle the following line: */
/* #longest {display:none;} */

#wrap {
  background:yellow;
  width:300px;
}

ul {
  float:right;
  list-style-type:none;
  margin:0;
  padding:0;
  text-align: right;
}

li {
  background:red;
  color:#fff;
  /* float:left; */
  display: inline-block;
  margin:4px;
}

在自动换行时强制与浮动元素进行右对齐

2 个答案: