html - 使用“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/

score 1 · Accepted Answer

我会使用带空格的弹性框

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>

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

这里是你改编的片段。

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>

3 回答 3