Question

我正在尝试使用带有<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;
}

Answer 1

这是因为当客户端的浏览器呈现时，元素之间的所有空白区域（包括换行符）都会折叠为单个空格。要隐藏空格，您可以：

删除li元素之间的空格：

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

将父font-size的{{1}}设置为ul，然后重新定义0元素的font-size：
```
li
```
评论ul { font-size: 0; } ul li { font-size: 14px; }元素之间的差距：
```
li
```
浮动<li>Content</li><li>Next li</li>元素而不是使用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>开始标记放在上一行元素的结束标记之后的前一行：

li

）

Answer 2

间隙是由<li></li>标签之间的空白引起的。请尝试<li>...</li><li>...</li>作为比较。

无论如何，请使用display:block并使用float:left

来避免这种情况

Answer 3

这是一篇很棒的文章，解释了之前的答案已经提到的正在发生的事情和解决方法。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

你的css选择器名称也有点麻烦，你实际上只需要一个类，你可以利用CSS的本质来完成剩下的工作。

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

现在定位所有'li'标记，它们是.header类的子标记

.header li {
   display: inline;
 }

现在定位所有'a'标记，它们是.header类的子标记（这些标记恰好位于'li'标记内）

 .header a {
   /* etc */
 }

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

3 个答案: