如何在div中将元素均匀分布在彼此旁边？

Question

这是一个菜单.
例如,我有一个div元素,其中有3个跨度,所有这些都有一些边距,最大宽度和浮动(左或右).
它的位置从左侧开始,如下所示:
[[span1][span2][span3] - lots of free space here].
我想让它像这样:
[[span1] - space - [span2] - space - [span3]]
我怎么能用CSS做到这一点？我有点怀疑这是不可能的.
请注意,我希望在添加或删除菜单项时保持相同的样式.
HTML:

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

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

Answer 1

在"过去的日子"中,您将使用一个表格,您的菜单项将均匀分布,而无需明确说明项目数量的宽度.

如果它不适用于IE 6和7(如果这是关注的话),那么你可以在CSS中做同样的事情.

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

CSS:

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

无需调整项目数量.

示例没有table-layout:fixed- 单元格在整个宽度上均匀分布,但它们的大小不一定相同,因为它们的宽度由其内容决定.

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

示例table-layout:fixed- 无论内容如何,​​单元格大小相同.(感谢@DavidHerse对此添加的评论.)

• http://jsfiddle.net/kqHWM/

如果您希望左右对齐的第一个和最后一个菜单元素,则可以添加以下CSS:

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

Answer 2

你可以使用对齐.

这与其他答案类似,只是左边和右边的元素位于边缘而不是等间距 - [a ... b ... c而不是.a..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>

一个问题是你必须在每个元素之间留出空格.[见小提琴.]

将菜单项设置为内联块有两个原因:

1. 如果元素默认为块级项(例如<li>),则必须将显示设置为内联或内联块以保持在同一行中.
2. 如果元素有多个单词(<span>click here</span>),则每个单词在设置为内联时均匀分布,但只有元素在设置为内联块时才会分配.

见JSFiddle

编辑:
现在Flexbox有广泛的支持(所有非IE和IE 10+),有一个"更好的方法".
假设与上面相同的元素结构,您只需要:

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

如果您希望外部元素也是间隔的,只需将空间切换到空间.
见JSFiddle

Answer 3

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

HTML

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

CSS

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

这是小提琴:http://jsfiddle.net/ynemh3c2/(尝试添加/删除div)

以下是我了解到这一点:https://css-tricks.com/snippets/css/a-guide-到Flexbox的/

Answer 4

justify-content: space-between这display: flex就是我们所需要的,但感谢@Pratul的灵感!

Answer 5

这是快速简便的方法

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

CSS

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

然后调整width了的span对你是有个数.

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

Answer 6

您只需要将 id 为#menuFlex 容器的 div 显示为这样：

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}