4

为什么 li 之间有空格以及如何删除它？（也许我可以用浮动或绝对定位来解决它，但我希望文本适应每个单词的长度并且整个 ul 居中）

这里是一个玩和检查的地方：http: //jsfiddle.net/Z258Q/

HTML：

<ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second more long</a></li>
</ul>

CSS：

a { outline:0; text-decoration: none ; color:#aaa; }

ul {
    margin:40px auto;
    list-style-type:none;
    padding:0;
    text-align: center;
}

ul li {
    position: relative;
    padding: 7px 17px;
    margin-right: 0px;
    border:1px solid; border-color:#ccc;
    border-bottom:0px; border-top:0px;
    height:8px; line-height:8px;
    display: inline-block;
}
ul li a {
    display:block; 
}
4

2 回答 2

6

因为您已用作inline-block显示类型，所以在输出中考虑了空格。删除标记中的空白，空白将随之消失。

<ul>
    <li>
        <a href="#">First</a>
    </li><li> <!-- < The gap WAS between this closing and opening tag -->
        <a href="#">Second more long</a>
    </li>
</ul>

这是您更新的 jsFiddle

于 2013-04-26T10:41:49.020 回答
3

因为你创造了它们inline-block。这意味着浏览器会将内联元素之间的空格合成为一个空格，并使用它来呈现内联项...

解决方案可以简单地确保元素之间没有空格，就像我在更新 jsfiddle中所做的那样。

至于只有一个左右边框，请参阅评论和更新的 jsfiddle here。

于 2013-04-26T10:42:20.247 回答