使用“text-align: justify”来对齐 inline-block 元素不起作用

Question

我有以下标记，我正在尝试沿我的 uls 宽度证明我的列表是这样的：

ul {
  width: 100%;
  text-align: justify;
}

ul::after {
  content: '';
  display: inline-block;
  width: 100%;
}

li {
  display: inline-block;
}

<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

实际上，这是沿父项宽度分布项目的常用方法。但由于某种原因，它在我当前的项目中不起作用。你有什么想法可以分享吗？

---

更新

查看这个小提琴以获得我正在使用的更真实的标记和样式： https://jsfiddle.net/gqL8rqje/

Answer 1

我会使用带空格的弹性框

ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}


li {
  display: inline-block;
}

<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

Answer 2

您的具体问题来自您的代码缩进。 事实上，display: inline-block + text-align: justify 仅在元素之间存在一定间隔时才有效。

换句话说，通用方法分布适用于

<ul>
<li><a>some text</a></li>
<li><a>some text</a></li>
<li><a>some text</a></li>
</ul>

但它不适合

<ul>
<li><a>some text</a></li><li><a>some text</a></li><li><a>some text</a></li>
</ul>

我认为此类代码缩进无法解决您的问题。 如果你想让它工作，你需要在生成页面时在<li> 标记之间插入一些断行。

否则，@Gerard 提供的解决方案是最防弹的，即使您不想使用 flexbox，它也将是您的上下文中最简单的方法。

Answer 3

你应该使用text-align-last: justify;，因为text-align: justify;最后一行总是左对齐，在你的情况下，唯一的一行是最后一行...

在此处查看您改编的小提琴：

https://jsfiddle.net/bnwvj1q4/1/

这里是你改编的 sn-p。

ul {
  width: 100%;
  text-align-last: justify;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>