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