CSS 如何将元素均匀分布在彼此相邻的 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7245018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to evenly distribute elements in a div next to each other?
提问by jurchiks
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:
这是用于菜单的。
例如，我有一个包含 3 个跨度的 div 元素，所有这些元素都有一些边距、最大宽度和浮动（左或右）。
它从左侧开始定位，如下所示：[[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:
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;
}
回答by MrWhite
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.
没有示例table-layout:fixed- 单元格均匀分布在整个宽度上，但它们的大小不一定相等，因为它们的宽度由它们的内容决定。
Example with table-layout:fixed- the cells are of equal size, regardless of their contents. (Thanks to @DavidHerse in comments for this addition.)
示例table-layout:fixed- 单元格大小相同，无论其内容如何。（感谢@DavidHerse 在评论中对此添加。）
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;
}
回答by SamGoody
You can use justify.
您可以使用 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 而不是 .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>
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 有两个原因：
- 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. - 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.
- 如果元素默认是块级项目（例如
<li>），则显示必须设置为 inline 或 inline-block 以保持在同一行。 - 如果元素有多个单词（
<span>click here</span>），设置为 inline 时每个单词会均匀分布，但设置为 inline-block 时只会分布元素。
EDIT:
Now that flexboxhas 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
如果您希望外部元素也间隔开，只需将 space-between 切换为 space-around。
查看 JSFiddle
回答by Pratul Sanwal
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/
这是小提琴：http: //jsfiddle.net/ynemh3c2/（也尝试添加/删除div）
这是我了解到的地方：https: //css-tricks.com/snippets/css/a-guide-到 flexbox/
回答by Crashalot
justify-content: space-betweenanddisplay: flexis all we needed, but thanks to @Pratul for the inspiration!
justify-content: space-between这display: flex就是我们所需要的，但感谢@Pratul 的灵感！
回答by Jason Gennaro
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 widthof the spans for the number you have.
然后调整width了的span对你是有个数。
回答by Rafael Corrêa
I have managed to do it with the following css combination:
我设法使用以下 css 组合来做到这一点：
text-align: justify;
text-align-last: justify;
text-justify: inter-word;
回答by Dipak
.container {
padding: 10px;
}
.parent {
width: 100%;
background: #7b7b7b;
display: flex;
justify-content: space-between;
height: 4px;
}
.child {
color: #fff;
background: green;
padding: 10px 10px;
border-radius: 50%;
position: relative;
top: -8px;
}<div class="container">
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>
</div>回答by Azafo Cossa
You just need to display the div with id #menuas flex container like this:
您只需要#menu像这样将带有 id 的 div 显示为 flex 容器：
#menu{
width: 800px;
display: flex;
justify-content: space-between;
}
回答by freedawirl
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.
使所有跨度都使用内联块元素。在包含菜单项的跨度列表下方创建一个宽度为 100% 的空拉伸跨度。接下来使包含跨度 text-align: justified 的 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>
