23

我想在一个栏上水平分布一些列表项，并且我想使代码模块化，以便在我插入更多时自动调整项目之间的空间。

我想要最左边的第一个项目，最右边的右边项目，其余的分布在两者之间。它们彼此之间的空间相等。考虑将一条线段分成几部分，这些项目将标记分离点，以及原始线段的头/尾。

我尝试了几种解决方案，并在网上找到了一些解决方案，但他们没有做我想要的。根据我之前的类比，他们只是把所有东西都放在中心，就像把每个项目放在每条线的中间。

有人可以在 CSS 中提供一个不错的解决方案吗？

4

4 回答 4

29

你可以在使用inline-block, 伪元素 和之后做你想做的事text-align: justify;，但它只适用于 IE8 及更高版本。

这是代码：

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

现场演示： http: //jsfiddle.net/joshnh/UX9GU/ ​</p>

于 2012-11-22T04:14:02.250 回答
9

有一个干净的解决方案：

http://radiatingstar.com/distribute-divs-images-equally-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;
}
于 2014-04-01T08:41:09.077 回答
7

作为 joshnh 答案的补充，如果有人有同样的问题：

注意：每个元素text-align: justify;之后都需要一个空间才能工作。display: inline-block;否则元素被视为一个单词，不会水平分布。

所以这行不通：

<!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>

但这将：

<!-- HTML -->
<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>

我刚刚遇到了这个问题，因为我们正在缩小 HTML 标记，而缩小器将所有内容放在一行中。

于 2016-08-27T15:32:47.617 回答
3

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;
}
于 2019-10-28T12:41:39.430 回答