html - 如何使用 CSS 水平分布元素？

Question

<分区>

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/