Question

为什么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; 
}

Answer 1

因为您已使用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>

这是你的updated jsFiddle

Answer 2

因为你制作了inline-block。这意味着浏览器会将内联元素之间的空格复合为单个空格，并使用它来内联呈现项目......

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

至于只有一个边框，左右，请参阅注释和updated jsfiddle here。

李之间的空间

2 个答案: