html - 导航 UL/LI 附加空间

Question

那是那些日子之一，我不明白为什么我在下面的代码中的每个 LI 标签的左边都有一个空格。如果将鼠标悬停在菜单项上，您就会明白我的意思。

http://jsfiddle.net/midnitesonnet/C2Dub/

<div id="wrapper">
    <div id="menu">
        <ul>
            <li><a href="#!1">Home</a></li>
            <li><a href="#!2">Home</a></li>
            <li><a href="#!3">Home</a></li>
        </ul>
    </div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>

Answer 1

I can not figure out why I'm getting a space to the left of each of the LI tags

因为你用 display:inline-block 格式化它们- 和标签之间有空格。这是基本的“HTML 行为”，两个内联( block )元素之间的任何空白在显示时都被压缩为一个空格字符。

或者 float the LI instead , 或 write them without whitespace between the tags , 意思是 ...</li><li>...