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

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示例)
• 使用comments(<!-- -->)来占用空白区间(jsFiddle示例)
• 关闭下一行的列表项标签(jsFiddle示例)

请注意,还有第四个选项,您可以在该#main_nav元素上将font-size设置为零,然后将锚点上的font-size设置为更大的值,但是使用此技术的某些早期版本的Android存在问题.jsFiddle例子.