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

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

在这里看到你的改编小提琴：

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

这是你改编的片段。

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>

Answer 3

您的特定问题来自代码缩进。实际上，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，也将是您上下文中最简单的方法。

使用“text-align：justify”无法正常工作来证明内联块元素

3 个答案: