css - 水平间距 CSS 菜单 LI

Question

我正在尝试获取每个 <li> 的盒子标签彼此相邻定位，没有空格，但就像现在一样，它们在每个框之间有很大的空间。我该如何删除它？

HTML代码: 菜单

<div id="menucontainer">
    <ul id="menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
    </ul>
</div>

</body>
</html>

CSS 代码:

ul {
margin: 0px;
padding: 0;
}

#menu li {
display: inline;
list-style: none;
}
#menu li a {
margin: 0px;
padding: 5px 30px 5px 30px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 15px;
color: rgba(66,48,1,1);
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
}
#menu li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#menu a:link, #menu a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#menu a:active {
color: rgba(250,191,12,1);
}
#menu a#current {
background: rgba(85,137,48,1);
}

Answer 1

那些空白是空白字符。当您将光标移到这些间隙之一上时，您可以看到它们 - 它会变为文本光标。

你可以通过以下方式避免这种情况

1. 将您的列表项写在一行中，从而避免空白
2. 像这样 float 您的列表项:

CSS:

#menu li {
    display: inline;
    list-style: none;
    float: left;
}