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

这些差距是空白字符。当您将光标放在其中一个间隙上时，您可以看到它们 - 它会变为文本光标。

你可以通过

来避免这种情况

将您的列表项写在一行中，从而避免空格
像你这样浮动你的列表项目：

CSS：

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

水平间距CSS菜单LI

1 个答案: