Html 如何使用CSS水平分布项目？

我想在一个横条上水平分布一些列表项，我想使代码模块化，这样当我插入更多时，它会自动调整项目之间的空间

我希望第一个项目在最左边，右边的项目在最右边，其余的分布在中间。它们之间都有相等的空间。考虑将一条线段分成几段，这些项目将标记分离点，以及原始线段的头/尾

我尝试了几种解决方案，并在网上找到了一些，但它们并没有达到我想要的效果。他们只是把每件东西都放在一起，就像我以前的类比一样把每一条线放在中间。

---

有人能用CSS提供一个很好的解决方案吗？

在使用

内联块

、伪元素和

文本对齐：justify之后，您可以做您想做的事情，但它只能在IE8及以上版本中工作

代码如下：

<!-- HTML -->

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

现场演示：
​
 有一种干净的解决方案：


除此之外，如果任何人有相同的问题：

注意：
文本对齐：对齐在每个
显示：内联块后需要一个空格要工作的元素。否则，元素将被视为一个单词，不会水平分布

所以这是行不通的：

<!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>


项目1
项目2
项目3
项目4


但这将：

<!-- HTML -->
<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>



项目1

项目2

项目3

项目4



我之所以会遇到这个问题，是因为我们正在缩小HTML标记，缩小器将所有内容放在一行中。
2019年，有一个灵活的解决方案，它带有
调整内容：间距


项目1

项目2

项目3

项目4



ul{
宽度：100%；/*您的元素需要固定的宽度*/
显示器：flex；
证明内容：之间的空间；
}
我认为答案是“非常困难”。CSS在元素之间分配空间方面非常糟糕。（至少在flexbox布局变得可用之前）如果你不想让CSS依赖于项目的数量，你的明显选择是：使用表，或者只是从左到右插入一些填充。我不确定仅仅使用CSS就可以合理地做到这一点——我只有通过JavaScript调整宽度才能做到这一点。表格可能会有所帮助，但这些天在用于表格数据以外的任何其他数据时，它们通常被认为是不好的形式。我尝试了一下，它很管用，但你能在这里解释一下它的神奇之处吗？这个问题的答案很好地解释了这一点：
<!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>

<!-- HTML -->
<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>