Html 如何均匀地间隔许多行内块元素？

How to evenly space many inline-block elements?

提问by CoR

Is it possible to evenly space many elements in a div with changeable width.

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

Here's not working example. If we use text-align:center; elements will be centered, but margin:0 auto; is not working. I want to accomplish something like justify+center:

这里不是工作示例。如果我们使用 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

Container will be user resizable. One picture is worth a 1000 words:

容器将是用户可调整大小的。一张图值1000字：

Container(red box) width:100%; So user can resize it (browser window, js, whatever).
<--> represent even spaces. In second row <--> are bigger because there is more room. I was able to fake it with:

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

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

回答by Spudley

I recently read about a very clever technique to do exactly what you're asking.

我最近读到了一种非常聪明的技术，可以完全按照您的要求进行操作。

In short, you just need to use text-align:justify;on the container element to achieve this, in conjunction with an extra invisible block at the end.

简而言之，您只需要text-align:justify;在容器元素上使用就可以实现这一点，并在末尾加上一个额外的不可见块。

This works because inline-blockelements are seen as being part of the text content, each being effectively a single word.

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

Using justifywill spread out the words in your text so that they fill the entire width of the element with extra space between the words. For inline-blockelements, this means that they are spaced out with even spaces between them.

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

I mentioned an extra invisible block at the end. This is required because normal text-align:justifywon't justify the last line of text. For normal text, that's exactly what you want, but for aligning inline-blockboxes, you want them all to be aligned.

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

The solution is to add an extra invisible but 100% width element to the end of your list of inline-blockelements. This will become effectively the last line of text, and thus the justifytechnique will work for the rest of your blocks.

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

You can use the :afterpseudo-selector to create the invisible element without needing to modify your markup.

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

Here's an updated version of your jsFiddle to demonstrate: http://jsfiddle.net/ULQwf/298/

这是您的 jsFiddle 的更新版本来演示：http: //jsfiddle.net/ULQwf/298/

And here's the original article that explains it in more detail: http://www.barrelny.com/blog/text-align-justify-and-rwd/

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

[EDIT]One final update after seeing the image you've added to the question. (I don't have a better answer, but some additional thoughts that might be useful).

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

Ideally what you need here is a :last-lineselector. Then you could text-align:justifythe main text and text-align:centerthe last line. That would do what you want.

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

Sadly, :last-lineisn't a valid selector (:first-lineis, but not :last-line), so that's the end of that idea.

可悲的是，:last-lineis not a valid selector ( :first-lineis, but not :last-line)，所以这个想法就结束了。

A slightly more hopeful thought is text-align-last, which doesexist as a feature. This could do exactly what you want:

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

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

Perfect.

完美的。

Except that it's non-standard and has very limited browser support.

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

You can read about here on MDN.

你可以在 MDN 上阅读这里。

I guess as a last resort it might be an option for you, if you can live with only partial browser support. It would at least get what you want for someof your users. But that's not really a sensible way to go.

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

My gut feeling though is that this as as close as you're going to get. Tantalisingly close to what you want, but just not quite there. I hope I'm proved wrong, but I'll be surprised. Too bad though, because I it would seem like a perfectly logical thing to want to do.

我的直觉是，这与您将要获得的一样接近。非常接近你想要的东西，但只是不完全在那里。我希望我被证明是错的，但我会感到惊讶。不过太糟糕了，因为我想做这件事似乎是完全合乎逻辑的。

回答by Ezequiel Gorbatik

I worked on your example, you have to make a combination of block / inline style since the justify alone just work for inline (text).

我研究了您的示例，您必须组合块/内联样式，因为 justify 仅适用于内联（文本）。

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%;
}

回答by Ezequiel Gorbatik

If tried a different approach, in the fiddle looks pretty similiar to the picture but the space is fixed in both lines but the elements are intercalated.

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

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%;

}