如何均匀分布在一个div中的元素彼此相邻？
这是为了一个菜单。
例如，我有一个3元素的div元素，所有这些元素都有一些margin，max-width和float（左或右）。
它从左侧开始定位，如下所示：
[[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; }
在“过去的日子”里，你会使用一张桌子，你的菜单项将被平均分配，而不必明确说明项目数量的宽度。
如果不是IE 6和IE 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示例table-layout:fixed – 单元格在整个宽度上均匀分布，但是它们的大小不一定相等，因为它们的宽度取决于其内容。
table-layout:fixed示例table-layout:fixed – 单元格的大小相同，无论其内容如何。 （感谢@DavidHerse在这个补充的评论。）
如果你想要第一个和最后一个菜单元素左alignment，那么你可以添加下面的CSS：
div.demo span:first-child { text-align: left; } div.demo span:last-child { text-align: right; }
你可以使用justify。
这与其他答案类似，除了左边和右边的元素将在边缘而不是相等的间距 – [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>
一个问题是你必须在每个元素之间留下空格。 [看小提琴]
将菜单项设置为内联块有两个原因：
- 如果元素是默认的块级项目（例如
<li>），则必须将显示设置为内联或内联块以保持在同一行中。 - 如果元素有多个单词（
<span>click here</span>），则设置为内联时，每个单词均匀分布，但设置为内嵌块时仅分布元素。
看到JSFiddle
编辑：
现在flexbox有广泛的支持（所有非IE和IE 10+），有一个“更好的方法”。
假设与上面相同的元素结构，所有你需要的是：
<style> .menu { display: flex; justify-content: space-between; } </style>
如果你想要外部元素间隔，只要切换空间到空间。
看到JSFiddle
如果有人想尝试一个稍微不同的方法，他们可以使用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/ （尝试添加/删除divs）
这里是我了解到这一点： https ： //css-tricks.com/snippets/css/a-guide-to-flexbox/
这是做到这一点的快捷方式
<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; }
然后调整你所拥有的数字的span width 。
例如： http : //jsfiddle.net/jasongennaro/wvJxD/
justify-content: space-between和display: flex是我们所需要的，但感谢@Pratul的灵感！
使所有跨度使用内嵌块元素。 在包含菜单项的跨度列表下创build一个100％宽度的空白拉伸跨度。 接下来使包含跨越文本alignment：alignment的div。 这会强制内联块元素[你的菜单项]均匀分布。
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>
