html - 如何均匀间隔许多内联 block 元素？

Question

是否可以在宽度可变的 div 中均匀分布多个元素。

这是 not working example .如果我们使用 text-align:center;元素将居中，但 margin:0 auto;不管用。我想完成类似 justify+center 的事情:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

容器将由用户调整大小。一张图片抵得上 1000 个字:

容器(红框)宽度:100%；因此用户可以调整它的大小(浏览器窗口、js 等)。
<--> 代表偶数空格。第二行 <--> 更大，因为有更多空间。我能够伪造它:

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion

Answer 1

我最近读到一个非常聪明的技术来完全按照你的要求去做。

简而言之，您只需在容器元素上使用 text-align:justify; 并在末尾添加一个额外的不可见 block 即可实现此目的。

这是有效的，因为 inline-block 元素被视为文本内容的一部分，每个元素实际上都是一个单词。

使用 justify 将展开文本中的单词，以便它们填充元素的整个宽度，并在单词之间留出额外的空间。对于 inline-block 元素，这意味着它们之间的间隔是均匀的。

我在最后提到了一个额外的隐形 block 。这是必需的，因为普通的 text-align:justify 不会对齐最后一行文本。对于普通文本，这正是您想要的，但是对于对齐 inline-block 框，您希望它们全部对齐。

解决方案是在 inline-block 元素列表的末尾添加一个额外的不可见但 100% 宽度的元素。这实际上将成为文本的最后一行，因此 justify 技术将适用于您的其余 block 。

您可以使用 :after 伪选择器来创建不可见元素，而无需修改您的标记。

这是您的 jsFiddle 的更新版本，用于演示:http://jsfiddle.net/ULQwf/298/

这是对其进行更详细解释的原始文章:http://www.barrelny.com/blog/text-align-justify-and-rwd/

[编辑]看到您添加到问题中的图像后的最后一次更新。 (我没有更好的答案，但有一些额外的想法可能有用)。

理想情况下，您在这里需要的是一个 :last-line 选择器。然后你可以 text-align:justify 主要文本和 text-align:center 最后一行。那会做你想要的。

遗憾的是，:last-line 不是一个有效的选择器(:first-line 是，但 :last-line 不是) ，所以这就是那个想法的结尾。

一个稍微更有希望的想法是 text-align-last，它确实作为一个特性存在。这可以完全满足您的需求:

text-align:justify;
text-align-last:center;

完美。

除了它是非标准的并且浏览器支持非常有限。

您可以 read about here on MDN .

我想作为最后的手段，如果您只能接受部分浏览器支持，它可能是您的一个选择。对于您的一些用户，它至少会得到您想要的。但这并不是真正明智的做法。

但我的直觉是，这与您将要达到的一样接近。诱人地接近你想要的东西，但还不够。我希望我被证明是错的，但我会感到惊讶。太糟糕了，因为我想做这件事似乎是完全合乎逻辑的。