繁体   English   中英

CSS:向左浮动的列表项之间的空格

[英]CSS: spaces between list items that are floated left

我是新手,所以请忍受我。

我使用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> 

这不是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

只需更新此CSS代码

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

它将消除ul li之间的空白

只有一个错误。 只是删除

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM