Question

justified text http://i39.tinypic.com/2it4i3b.png

顶部显示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/

来自哪个小空间？为什么不能证明冲洗到边缘？

Answer 1

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

这样：

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

会解决它。

{text-align：justify;在水平菜单上。删除右侧添加的空间

1 个答案: