1

对齐文本

顶部显示 Firefox/IE。底部是谷歌浏览器。注意到右边的小空间了吗?

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

ul {
    padding: 0;
    margin: 0;
    width: 300px; 
    list-style-type: none;
    text-align: justify;
    background-color: #00f;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    display: inline-block;
}

a {
    color: #fff;
}

http://jsfiddle.net/EtU9j/

这么小的空间是从哪里来的?为什么它不能证明冲洗到边缘是合理的?

4

1 回答 1

5

</li>它是最后一个和之间的空白</ul>。它大约 4px 宽,正常字体大小。

这:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li></ul>

或这个:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li><!--
--></ul>

会修复它。

于 2013-09-05T13:54:42.967 回答