如何均匀分隔许多内联块元素？

Question

是否可以在宽度可变的div中均匀地分隔多个元素.

这里没有工作的例子.如果我们使用text-align:center; 元素将居中,但边距:0自动; 不管用.我想完成像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;在容器元素上使用它来实现这一点,并结合最后一个额外的隐形块.

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

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

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

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

您可以使用: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;

完善.

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

您可以在MDN上阅读此处.

我想作为最后的手段,它可能是你的选择,如果你只能使用部分浏览器支持.它至少可以为你的一些用户提供你想要的东西.但这并不是一个明智的选择.

我的直觉是,这就像你将得到的那样接近.非常接近你想要的东西,但只是不太合适.我希望我被证明是错的,但我会感到惊讶.虽然太糟糕了,因为我觉得这样做是完全合乎逻辑的.