html - 换行时无法强制与 float 元素右对齐

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(注意:没有 float ，'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;
}

这是你的 fiddle 的 fork :https://jsfiddle.net/0o93dvrp/