Html 如何水平均匀分布元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4108726/
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 spread elements horizontally evenly?
提问by Daniel B?hmer
I have a divcontainer on my web page with fixed width and it contains form elements for logging in. Below these elements there are a submit button, forgotten password link etc.
我的div网页上有一个固定宽度的容器，它包含用于登录的表单元素。在这些元素下方有一个提交按钮、忘记密码链接等。
It happens the last line elements need fewer width than the box provides. How to spread them evenly? I don't want
碰巧最后一行元素需要的宽度小于框提供的宽度。如何均匀分布？我不要
- default
- 默认
| A B C |
- centering the line like
- 像线一样居中
| A B C |
- nor table layout
- 也不是表格布局
| A | B | C |
Instead I am looking for some CSS way to achieve:
相反，我正在寻找一些 CSS 方式来实现：
| A B C |
That is:
那是：
- put about equal space between all elements
- center the whole thing to avoid the first or last to the side
- 在所有元素之间放置大约相等的空间
- 将整个事物居中以避免第一个或最后一个放在一边
edit:This answerworked best. I created templates for 2 or 3 elements like this:
编辑：这个答案效果最好。我为 2 或 3 个元素创建了模板，如下所示：
div.spread2evenly > div {
display: inline-block;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 50%;
text-align: center;
}
采纳答案by Nelson Rothermel
Try this (http://jsfiddle.net/BYEw5/):
试试这个（http://jsfiddle.net/BYEw5/）：
<div class="container">
<div>A</div><div>B</div><div>C</div>
</div>
.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 33%;
text-align: center;
}
Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.
由于您正在处理内联块，因此标签之间不能有空格（丑陋，但有效），否则空格将可见。
Edit 1:Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.
编辑1：这里是关于inline-block的问题的一些详细信息：http://blog.another-d-mention.ro/programming/cross-browser-inline-block/，http://www.aarongloege.com/博客/web-development/css/cross-browser-inline-block/。您可能还需要添加display: -moz-inline-box;.
Edit 2:Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:
编辑 2：另外，33%*3 不是 100%。如果你真的想要 100% 并且不介意divs之间的一些空间，你可以这样做：
.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
margin-left: 2%;
width: 32%;
text-align: center;
}
.container > div:first-child {
margin-left: 0;
}
回答by Josh Crozier
CSS3 flexboxeshave better browser supportnow, although you may need to add additional vendor prefixes for more browser coverage.
CSS3 flexboxes现在有更好的浏览器支持，尽管您可能需要添加额外的供应商前缀以获得更多的浏览器覆盖范围。
Modern Approach:
现代方法：
Just change the displayof the container element to flexand then utilize the justify-contentpropertyto specify how the browser should distribute the space around and between the flex items along the main axis.
只需display将容器元素的更改为flex，然后利用该justify-content属性指定浏览器应如何沿主轴分布 flex 项周围和之间的空间。
In the example below, you will notice that justify-content: space-aroundor justify-content: space-betweenare used to space the elements out evenly.
在下面的示例中，您会注意到justify-content: space-around或justify-content: space-between用于将元素均匀隔开。
.container {
display: flex;
}
.container.space-around {
justify-content: space-around;
}
.container.space-between {
justify-content: space-between;
}<p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<hr />
<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
<div>A</div>
<div>B</div>
<div>C</div>
</div>回答by Nomistake
how about text-align:justify;?
怎么样text-align:justify;？
回答by Nick
I know this is an ancient question but if someone still happens to look for this, there now is an even easier option using flexboxes: justifiy-content: space-evenly. The name is pretty self explanatory. Here a reference
我知道这是一个古老的问题，但如果有人仍然碰巧寻找这个，现在有一个使用 flexboxes 的更简单的选择：justifiy-content: space-evenly. 这个名字是不言自明的。这里参考
.container {
display: flex;
justify-content: space-evenly;
}
回答by Diodeus - James MacFarlane
I'm not sure what your exact HTML is but try this: http://jsfiddle.net/k9FqG/
我不确定你的确切 HTML 是什么，但试试这个：http: //jsfiddle.net/k9FqG/
<div class="test">
<a href="">A</a>
<a href="">B</a>
<a href="">C</a>
<div class="clear"></div>
</div>
.clear {
clear:both;
}
.test {
width:350px;
text-align:center;
border:1px solid #ff0000
}
.test a {
display:block;
float:left;
width:33%;
}
回答by C???
This should get you started:
这应该让你开始：
<style type="text/css">
#container {
width: 210px;
border: 1px solid blue;
}
#container .part {
width: 68px; /*(210 / 3 - borders)*/
float: left;
text-align: center;
border: 1px solid yellow;
}
.clear {
height: 0;
line-height: 0;
overflow: hidden;
font-size: 0;
clear: left;
}
</style>
And then the HTML:
然后是 HTML：
<div id="container">
<div class="part">A</div>
<div class="part">B</div>
<div class="part">C</div>
<div class="clear"> </div>
</div>
I only added borders so you could see what the CSS was doing.
我只添加了边框，以便您可以看到 CSS 正在做什么。
回答by Arun Kumar A.J
I wanted to perform some hover effect and justify-content: space-betweenwasn't very clean. This helped for me.
我想执行一些悬停效果并且justify-content: space-between不是很干净。这对我有帮助。
<div style="display: flex;">
<div style="flex: 1 1 auto"> A </div>
<div style="flex: 1 1 auto"> B </div>
<div style="flex: 1 1 auto"> C </div>
</div>
(I originally got this answer from a different S.O. answer a very long time ago. Pardon me for not mentioning original credit, as I don't know)
（我很久以前最初从一个不同的 SO 答案中得到了这个答案。请原谅我没有提到原始信用，因为我不知道）
