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

Question

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

这是not working example。如果我们使用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，等等） ＆LT; - ＆GT;代表偶数空间。 在第二行＆lt; - ＆gt;更大，因为有更多的空间。我能够伪造它：

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

Answer 1

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

简而言之，您只需要在容器元素上使用text-align:justify;来实现此目的，并结合最后一个额外的隐形块。

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

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

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

解决方案是在inline-block元素列表的末尾添加一个额外的不可见但100％宽度的元素。这将成为文本的最后一行，因此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;

完美。

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

你可以read about here on MDN。

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

我的直觉是，这就像你要得到的那样接近。非常接近你想要的东西，但只是不太合适。我希望我被证明是错的，但我会感到惊讶。太糟糕了，因为我认为这似乎是一件非常合乎逻辑的事情。

Answer 2

我研究了你的例子，你必须组合块/内联样式，因为仅仅是为了内联（文本）的合理性。

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}

Answer 3

如果尝试了不同的方法，在小提琴中看起来非常类似于图片，但空间在两行中都是固定的，但元素是插入的。

div{
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:center;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
    width:60px;
    float:justify;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
      margin-left:2%;
    margin-right:2%;

}