如何在div中均匀分布元素?

This is meant for a menu.
For example I have a div element with 3 spans in it, all of which have some margin, max-width and float (left or right).
It is positioned starting from the left side and goes like this:
[[span1][span2][span3] - lots of free space here].
I want to make it even out like this:
[[span1] - space - [span2] - space - [span3]]
How can I do this using CSS? I kinda doubt it is not possible.
Note that I want it to keep the same style when I add or remove a menu item.
HTML:

这是菜单用的。例如，我有一个div元素，其中有3个span，所有这些元素都有一些空白、最大宽度和浮动(左或右)。它从左侧开始定位，如下:[[span1][span2][span3] -这里有很多*空间。我想把它弄成这样:[[span1] - space - [span2] - space - [span3]]我怎么能用CSS做这个?我有点怀疑这是不可能的。注意，在添加或删除菜单项时，我希望它保持相同的样式。HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

CSS:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

6 个解决方案

#1

In the 'old days' you'd use a table and your menu items would be evenly spaced without having to explicitly state the width for the number of items.

在“旧日”，你会使用一个表格，你的菜单项会被均匀地分隔开，而不需要显式地说明条目数量的宽度。

If it wasn't for IE 6 and 7 (if that is of concern) then you can do the same in CSS.

如果不是IE 6和7(如果有问题的话)，那么在CSS中也可以这样做。

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS:

CSS:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

Without having to adjust for the number of items.

不需要调整项目的数量。

Example without table-layout:fixed - the cells are evenly distributed across the full width, but they are not necessarily of equal size since their width is determined by their contents.

没有表格布局的例子:固定-单元格在整个宽度上是均匀分布的，但是它们的大小不一定相等，因为它们的宽度是由它们的内容决定的。

• http://jsfiddle.net/w3dx/ULQwf/
• http://jsfiddle.net/w3dx/ULQwf/

Example with table-layout:fixed - the cells are of equal size, regardless of their contents. (Thanks to @DavidHerse in comments for this addition.)

表格布局示例:固定-单元格大小相等，不管其内容如何。(感谢@DavidHerse的评论。)

• http://jsfiddle.net/kqHWM/
• http://jsfiddle.net/kqHWM/

If you want the first and last menu elements to be left and right justified, then you can add the following CSS:

如果你想让第一个和最后一个菜单元素左右对齐，那么你可以添加以下CSS:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

#2

You can use justify.

您可以使用证明。

This is similar to the other answers, except that the left and rightmost elements will be at the edges instead of being equally spaced - [a...b...c instead of .a..b..c.]

这和其他的答案相似，只是最左和最右的元素会在边缘而不是等距的- [a…b…]c代替。. . b . . c。)

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

One gotcha is that you must leave spaces in between each element. [See the fiddle.]

一个问题是您必须在每个元素之间留空格。(看到小提琴。)

There are two reasons to set the menu items to inline-block:

将菜单项设置为inline-block有两个原因:

1. If the element is by default a block level item (such as an <li>) the display must be set to inline or inline-block to stay in the same line.
2. 如果元素在默认情况下是块级别的项(例如
3. )，那么必须将显示设置为内联或内联块以保持在同一行。
4. If the element has more than one word (<span>click here</span>), each word will be distributed evenly when set to inline, but only the elements will be distributed when set to inline-block.
5. 如果元素有多个单词(点击这里)，每个单词在设置为内联时将均匀分布，但在设置为内联块时，只有元素将分布。

See the JSFiddle

看到JSFiddle

EDIT:
Now that flexbox has wide support (all non-IE, and IE 10+), there is a "better way".
Assuming the same element structure as above, all you need is:

编辑:既然flexbox拥有广泛的支持(非IE和IE 10+)，有了一个“更好的方法”。假设相同的元素结构，你所需要的就是:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

If you want the outer elements to be spaced as well, just switch space-between to space-around.
See the JSFiddle

如果你想让外部元素也是间隔的，那就在空格和空格之间切换。看到JSFiddle

#3

If someone wants to try a slightly different approach, they can use FLEX.

HTML

如果有人想尝试稍微不同的方法，他们可以使用FLEX。HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

Here is the fiddle: http://jsfiddle.net/ynemh3c2/ (Try adding/removing divs as well)

Here is where I learned about this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这里是fiddle: http://jsfiddle.net/ynemh3c2/(也可以尝试添加/删除divs)

#4

justify-content: space-betweenanddisplay: flex is all we needed, but thanks to @Pratul for the inspiration!

我们只需要flex，但是要感谢@Pratul的灵感!

#5

This is the quick and easy way to do it

这是一种快速简便的方法。

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

Then adjust the width of the spans for the number you have.

然后调整跨度的宽度为您拥有的数字。

Example: http://jsfiddle.net/jasongennaro/wvJxD/

例如:http://jsfiddle.net/jasongennaro/wvJxD/

#6

Make all spans used inline-block elements. Create an empty stretch span with a 100% width beneath the list of spans containing the menu items. Next make the div containing the spans text-align: justified. This would then force the inline-block elements [your menu items] to evenly distribute.

使所有跨度都使用行内块元素。在包含菜单项的span列表下创建一个100%宽度的空拉伸span。接下来，使包含span文本对齐的div成为合理的。这将迫使内联块元素(您的菜单项)均匀分布。

https://jsfiddle.net/freedawirl/bh0eadzz/3/

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>