3 
<nav id="main_nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>

#main_nav{
    background:green;
}

#main_nav li{
    display:inline-block;
    list-style:none;
    padding:10px;
    font-weight:bold;
}
#main_nav li a{
    text-decoration: none;
    color:white;
    padding:10px;
}

#main_nav li{
    -webkit-transition: opacity .5s, background .5s, color .5s;
    -moz-transition: opacity .5s, background .5s, color .5s;
    -o-transition: opacity .5s, background .5s, color .5s;
}

#main_nav li:hover{
    color:red;
    background:rgba(0, 0, 200,.5);
}

这是我的导航栏，但我有问题。每个链接之间是一个小空间。当我快速将鼠标悬停在它们上方时，它看起来并不好。如何删除它？

4

7 回答 7

11

几种方法：

请注意，还有第四个选项，您可以将#main_nav元素上的字体大小设置为零，然后将锚点上的字体大小设置为更大的值，但是使用此技术的一些早期版本的 Android 存在问题。jsFiddle 示例。

于 2013-02-12T15:34:54.257 回答
2

当您使用display:inline-block;列表元素时会发生这种情况。您应该使用float:left或使用边距/填充

于 2013-02-12T15:34:56.223 回答
1

安排all the list in single line将删除空间...

<li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Forum</a></li><li><a href="#">Contact Us</a></li>

更新小提琴：http: //jsfiddle.net/RYh7U/78/

于 2013-02-12T15:43:30.343 回答
1

看到这个小提琴：http: //jsfiddle.net/zteA7/

这是因为 inline-block 创造了空间。

使<li>元素浮动并使用 CSS:after选择器插入更清晰的块元素，使nav块的高度与菜单的高度相同。（不需要 html）。

您也不需要指定容器高度，这应该意味着换行符将起作用

于 2013-02-12T15:41:42.530 回答
0

这是因为 属性display: inline-block;，它导致li“块”仍然表现为内联元素，因此在它们之间建立空间。我遇到过这个问题几次，我知道两个（不是那么漂亮）的解决方案：

  1. 制作li元素float: left，但要小心不要弄乱设计的其余部分。
  2. 在元素之间写入填充空格的 html 注释li，因此浏览器不会识别它们之间的“空格”。
于 2013-02-12T15:38:09.473 回答
0 
#main_nav li{
    display:inline-block;  /* the new web designer disease ?? */
    list-style:none;
    padding:10px;
    font-weight:bold;
    margin:0;
}

只需以这种方式重写您的html

<ul>
    <li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Forum</a></li><li><a href="#">Contact Us</a></li>
</ul>
于 2013-02-12T15:37:02.887 回答
-1

从 <ul> 标记中删除任何填充。使用 reset.css 来避免类似http://meyerweb.com/eric/tools/css/reset/的问题可能对您有用

于 2013-02-12T15:31:49.237 回答