如何使用CSS水平分发项目？ [英] How do I distribute items horizontally with CSS?

问题描述

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

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.

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

Can someone please provide a nice solution in CSS?

推荐答案

您可以使用 inline-block 和 text-align：justify; ，但它只能在IE8及以上版本中使用。

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.

：

<!-- 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/

Live demo: http://jsfiddle.net/joshnh/UX9GU/ ​

这篇关于如何使用CSS水平分发项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！