Html 如何使用 CSS 水平分布项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13505616/
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 do I distribute items horizontally with CSS?
提问by Xavier_Ex
I would like to distribute a few list items horizontally on a bar, and I want to make the code modular so it automatically adjusts the space between items when I insert more.
我想在一个栏上水平分布一些列表项，我想让代码模块化，以便在我插入更多项时自动调整项之间的空间。
I want the first item on the leftmost side, and the right item on the rightmost side, and the rest distributed in between. They all have equal space between each other. Think of separating a line segment into several pieces, the items would mark the points of separation, as well as the head/tail of the original line segment.
我想要最左侧的第一个项目，最右侧的右侧项目，其余的分布在两者之间。它们彼此之间都有相等的空间。考虑将一条线段分成几部分，这些项目将标记分离点，以及原始线段的头/尾。
I tried several solutions and found some online, but they don't do what I want. They just centre everything more like putting each item in the middle of each line pieces according to my previous analogy.
我尝试了几种解决方案，并在网上找到了一些解决方案，但它们不符合我的要求。根据我之前的类比，他们只是将所有内容放在中心位置，更像是将每个项目放在每个线段的中间。
Can someone please provide a nice solution in CSS?
有人可以在CSS中提供一个很好的解决方案吗？
回答by joshnh
You can do what you are after using inline-block, pseudo-elements and text-align: justify;, but it will only work in IE8 and above.
您可以在使用inline-block, 伪元素和之后做您想做的事情text-align: justify;，但它只能在 IE8 及更高版本中工作。
Here is the code:
这是代码：
<!-- HTML -->
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
?
/* CSS */
ul {
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
ul:before {
content: '';
display: block;
margin-top: -1.25em;
}
li {
display: inline-block;
margin-right: -.25em;
position: relative;
top: 1.25em;
}
Live demo: http://jsfiddle.net/joshnh/UX9GU/?
现场演示：http: //jsfiddle.net/joshnh/UX9GU/?
回答by Marcelo Amorim
There is an clean solution:
有一个干净的解决方案：
http://radiatingstar.com/distribute-divs-images-equaly-line
http://radiatingstar.com/distribute-divs-images-equaly-line
#container {
text-align: justify;
}
#container > div {
width: 100px; /* Declare your value. Can be in relative units. */
display: inline-block;
vertical-align: top;
}
#container:after {
content: "";
width: 100%;
display: inline-block;
}
回答by Zwergal
As an addition to joshnh answer, if anyone has the same issue:
作为 joshnh 答案的补充，如果有人有同样的问题：
Watch out: text-align: justify;needs a space after every display: inline-block;element to work. Otherwise the elements are treated as one word and will not distribute horizontally.
注意：text-align: justify;每个display: inline-block;元素后都需要一个空格才能工作。否则元素被视为一个词，不会横向分布。
So this won't work:
所以这行不通：
<!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>
But this will:
但这将：
<!-- HTML -->
<ul>
<li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
<li>Item 4<li>
</ul>
I just had this issue because we are minifying our HTML-Markup and the minifier puts everything in one line.
我刚刚遇到这个问题，因为我们正在缩小我们的 HTML 标记，并且缩小器将所有内容放在一行中。
回答by neiya
In 2019 there is a flex solution for it with justify-content: space-between
2019 年有一个灵活的解决方案 justify-content: space-between
<ul>
<li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
<li>Item 4<li>
</ul>
ul {
width: 100%; /* Your element needs a fixed width */
display: flex;
justify-content: space-between;
}
