Question

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

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

Answer 1

有几种方法：

删除列表项之间的空白区域（ jsFiddle example ）
使用评论（）占据空白区间（ jsFiddle example ）
关闭下一行的列表项标签（ jsFiddle example ）

请注意，还有第四个选项，您可以在#main_nav元素上将font-size设置为零，然后将锚点上的font-size设置为更大的值，但是有一些问题使用这种技术的早期版本的Android。的 jsFiddle example

Answer 2

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

Answer 3

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

这是因为内联块创建空间。

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

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

Answer 4

安排 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/

Answer 5

#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>

Answer 6

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

制作li元素float: left，但请注意不要弄乱其余的设计。
在li元素之间填写空格填充html注释，因此浏览器之间不会识别出“空格”。

Answer 7

从＆lt; ul＆gt;中删除任何填充标签。使用reset.css来避免像http://meyerweb.com/eric/tools/css/reset/

这样的问题可能会有用

如何删除链接之间的空格？

7 个答案: