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

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 上将字体大小设置为零。元素，然后将 anchor 上的字体大小设置为更大的值，但使用此技术的某些早期版本的 Android 存在问题。 <强> jsFiddle example .