CSS导航差距

Question

所以在我创建的菜单栏上，底部有一个小间隙，如下图所示：

我真的想要移除它，我不知道是什么导致它只出现在底部，没有其他边缘。这是我的代码：

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid #e7e7e7;
	background-color: #f3f3f3;
}

#nav li {
	float: left;
}

#nav li a {
	display: block;
	color: #666;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-family: 'Economica', sans-serif;
}

#nav li a:hover:not(.active) {
	background-color: #ddd;
}

#nav li a.active {
	color: white;
	background-color: #4CAF50;
}

<div id="nav">	
	<ul>
		<li><a href="#">User Management</a></li>
		<li><a href="#">Project Management</a></li>
		<li><a href="#">Site Management</a></li>
		<ul style="float:right;list-style-type:none;">
			<li><a href="#">Logout</a></li>
		</ul>
	</ul>
</div>

https://jsfiddle.net/vrh4hpa1/

我没有看到任何只会导致它出现在底部的padding，也许我是盲目的。

Answer 1

首先，您的HTML无效，您ul直接在另一个ul内。请尝试以下方法：

HTML：

<div id="nav">  
  <ul>
    <li><a href="#">User Management</a></li>
    <li><a href="#">Project Management</a></li>
    <li><a href="#">Site Management</a></li>
    <li><a href="#">Logout</a></li>
  </ul>
</div>

CSS：

#nav li:last-child {float:right}

JSFiddle

Answer 2

这是因为＆＃34; logout＆＃34; 嵌套的UL 元素。锚链接。我已经更新了jsfiddle中的CSS代码：

https://jsfiddle.net/vrh4hpa1/4/

我只是添加了一个特殊的CSS规则，将顶部/底部填充减少了1px。

//what you have already
#nav li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Economica', sans-serif;
}

//additional rule for the nested ul element
#nav ul ul li a {
    padding: 13px 16px;
}

Answer 3

#nav li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Economica', sans-serif;
}

只需删除display：block;