左右浮动的反向列表[重复]

Question

这个问题在这里已经有了答案：

在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？ (6 个回答)

去年关闭。

我想要实现的目标如下：

| foo                      bar  baz  bam |

即让列表的第一个元素向左浮动，并且该列表中的连续元素向右对齐。 我附上了我的尝试片段，这并不能完全满足我的需要。

 ul li { display: inline; float: right; margin-right: 3vw; margin-bottom: 5vh; }

 <ul> <li>foo</li> <li>bar</li> <li>baz</li> <li>bam</li> </ul>

Answer 1

<ul>
 <li><span style="padding-right: 10px;">|</span>foo</li>  
 <li>bam<span style="padding-left: 10px;">|</span></li>
 <li>baz</li>
 <li>bar</li>
</ul>
ul li {
  display: inline;
  float: right;
  margin-right: 3vw;
  margin-bottom: 5vh;
}
ul li:first-child {
  float: left;
}