[英]CSS: spaces between list items that are floated left
I'm new, so please bear with me. 我是新手,所以请忍受我。
I made a navigation menu using ul's and li's: here is my jsfiddle of the menu 我使用ul和li制作了导航菜单: 这是菜单的jsfiddle
My problem was it had white spaces between the menu's... and the drop down menu's 我的问题是菜单的...与下拉菜单的菜单之间有空格
I'm quite confused which part of the code was doing it. 我很困惑代码的哪一部分正在执行。 I even added clear all default margin and padding in my css.
我什至在CSS中添加了清除所有默认边距和填充的功能。 I'm guessing its the html?
我猜它的HTML? If so, how do you normally remove the unwanted spacing?
如果是这样,通常如何删除不需要的间距?
* { 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>
It's not margin
, it comes from your border: 1px solid white;
这不是
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>
just Update this css code 只需更新此CSS代码
ul li{
background-color: black;
width: 110px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
}
it will remove white space between ul li 它将消除ul li之间的空白
there is only one mistake. 只有一个错误。 just remove
只是删除
`border: 1px solid white;`
and add 并添加
`border: none;`
your final code is 您的最终代码是
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.