2

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

3 回答 3

5

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

  1. 删除li元素之间的空格：

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

  2. 将font-size父级的设置ul为0，并重新定义元素font-size的：li

    ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
}

  3. 注释掉li元素之间的差距：

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

  4. 浮动li元素而不是 using display: inline，它通过将元素从正常流程中取出来删除空格：

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

ul li {
    float: left;
}

  5. 关闭li下一行的标签，在下一个li开始标签之前，这对我来说有点不对劲，但它是有效的：

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

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

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

)

于 2012-08-28T22:11:06.200 回答
2

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

display:block无论如何，使用和使用避免这种情况float:left

于 2012-08-28T22:10:53.527 回答
0

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

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;
 }

现在定位所有 .header 类的子级“a”标签（这些恰好在你的“li”标签内）

 .header a {
   /* etc */
 }
于 2012-08-28T22:41:36.100 回答