李之间的空间

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>

这是您更新的jsFiddle