html - 无序列表导航栏元素有奇怪的差距

我正在尝试使用 <ul> 编写导航栏与 inline元素，但元素之间都有一个似乎无处不在的差距。也就是说，当悬停链接时，阴影框应与周围的框对齐。当前页面如下所示:http://wictorht.at.ifi.uio.no/ .是什么造成了这些差距？

HTML:

<body>
    <div id="main">
        <ul class="header">
            <li class="title">wictorht</li>
            <li class="header">
            <a class="header" href="https://bitbucket.org/htor/dwmst/src">dwms</a>
            </li>
            <li class="header">
            <a class="header" href="https://bitbucket.org/htor/linux/src">linux</a>
            </li>
            <li class="header">
            <a class="header" href="http://www.fsf.org/register_form?referrer=10397">fsf</a>
            </li>
            <li class="header">
            <a class="header" href="http://stackexchange.com/users/1006063">stackexhange</a>
            </li>
        </ul>
    </div>
</body>

CSS:

body {
    background: #666666;
    color: #c0c0c0;
    margin: 0;
}

a.header {
    text-decoration: none;
    padding: 10px;
    margin: 0;
}

a.header:hover, a.header:active {
    background-color: #666666;
    color: #c0c0c0;
}

ul.header {
    background-color: #c1c1c1;
    color: #666666;
    list-style: none;
    padding: 10px 10px 10px 0;
    margin: 0 0 10px 0;
}

li.header {
    display: inline;
}

li.title {
    background-color: #000000;
    color: #bada55;
    display: inline;
    padding: 10px;
}

最佳答案

这是因为在客户端浏览器呈现时，元素之间的所有空白(包括换行符)都会折叠成一个空格。要隐藏空格，您可以:

去掉li之间的空格元素:

<li><!-- content --></li><li><!-- more content --></li>

设置font-size parent 的ul至 0 , 并重新定义 font-size的 li元素:
```
ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
}
```

注释掉 li 之间的空白元素:

<li>Content</li><!--
--><li>Next li</li>

float li元素而不是使用 display: inline , 它通过将元素从正常流中取出来删除空格:

ul {
    overflow: hidden; /* to keep the li 'visibily' within the bounds of the ul */
}

ul li {
    float: left;
}

关闭li标记在下一行，下一个 li 之前开始标记这对我来说有点不对劲，但它是有效的:
```
<li>First li</li
><li>Second li</li>
```

(或者，显然，将 next li 开始标签放在上一行，紧跟在前一个元素的结束标签之后:

    <li>First li</li><
    li>Second li</li>

)

关于html - 无序列表导航栏元素有奇怪的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12168194/

html - 无序列表导航栏元素有奇怪的差距

上一篇：html - css 只有纹理和 'stitched' 丝带

下一篇：javascript - 使用 Javascript 和/或 JQuery，如何根据类查找后代元素？