Question

我想在条形图上水平分发一些列表项，我想使代码模块化，以便在插入更多内容时自动调整项目之间的空间。

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

我尝试了几种解决方案并在线发现了一些，但他们并没有做我想做的事。他们只是将所有内容都集中在一起，就像根据我之前的类比将每个项目放在每个线条的中间一样。

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

Answer 1

使用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/

Answer 2

有一个干净的解决方案：

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

Answer 3

作为对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-Markup并且minifier将所有内容放在一行中。

Answer 4

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

如何使用CSS水平分配项目？

4 个答案: