Question

我是新人，所以请耐心等待。

我使用ul和li制作了导航菜单：here is my jsfiddle of the menu

我的问题是菜单之间有空格......还有下拉菜单

我很困惑代码的哪一部分正在做这件事。我甚至在我的CSS中添加了清除所有默认边距和填充。我猜它的HTML？如果是这样，你通常如何删除不需要的间距？

＆＃13;

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

ul li {
  background-color: black;
  border: 1px solid white;
  width: 110px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: left;
}

ul li a {
  color: white;
  text-decoration: none;
}

ul li a:hover {
  background-color: red;
  display: block;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="style.css">
<ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 2</a></li>
      <li><a href="#">submenu 3</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

它不是margin，它来自您的border: 1px solid white;

＆＃13;

*{
    margin:0;
    padding:0;
}

ul{

    list-style: none;

}

ul li{
    background-color: black;
    /* border: 1px solid white; --- Here it is */
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
}

ul li a{
    color: white;
    text-decoration: none;
}

ul li a:hover{
    background-color: red;
    display: block;
}

ul li ul li {
    display: none;
}


ul li:hover ul li{
    display:block;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="style.css">

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
</ul>

＆＃13;

JSFiddle

Answer 2

只需更新此css代码

ul li{
    background-color: black;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
}

它将删除ul li之间的空格

Answer 3

只有一个错误。只需删除

`border: 1px solid white;`

并添加

 `border: none;`

你的最终代码是

ul li{
    background-color: black;
    border: none;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
 }

CSS：左侧浮动的列表项之间的空格

3 个答案: