CSS：向左浮動的列表項之間的空格

Question

我是新手，所以請忍受我。

我使用ul和li制作了導航菜單： 這是菜單的jsfiddle

我的問題是菜單的...與下拉菜單的菜單之間有空格

我很困惑代碼的哪一部分正在執行。 我什至在CSS中添加了清除所有默認邊距和填充的功能。 我猜它的HTML？ 如果是這樣，通常如何刪除不需要的間距？

 * { 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; } 

 <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> 

Answer 1

這不是margin ，而是來自您的border: 1px solid white;

 *{ 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; } 

 <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> 

的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;
 }