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

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