我正在尝试使用 html 和 css 在水平线上方创建一个水平菜单栏。下面是我的代码-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Horizontal Navigation Bar</title>
<style>
.nav
{
float: right;
padding: 0;
list-style: none;
background-color: #EDF2F8;
border-bottom: 1px solid #99CCFF;
border-top: 1px solid #99CCFF;
}
.nav li
{
float: right;
}
.nav li a
{
display: block;
padding-top:5px;
padding-bottom:5px;
padding-right:10px;
padding-left:10px;
text-decoration: none;
font: small/1.3 Arial, Helvetica, sans-serif;
font-weight: bold;
color: #104E8B;
border-left: 1px solid #99CCFF;
}
.nav li a:hover
{
color: #B03060;
background-color: #ffffff;
}
hr
{
border: 1px solid #BDBDBD;
}
</style>
</head>
<body>
<ul class="nav">
<li style="border-right: 1px solid #99CCFF; "><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<hr width="100%">
</body>
</html>
但不知何故，水平线和菜单栏之间有一个空间，我想消除它。我该怎么做？
[添加] 还有一个问题，如果你看到，水平线的左右两边有空隙。我是否也可以删除此空白以使其填满整个页面？
谢谢， 卡提克
最佳答案
您需要删除 ul 底部的边距。
更新:
从正文中移除边距以使 hr 一直贯穿整个页面。
body {
margin: 0;
}
.nav {
margin-bottom: 0;
}
关于html - 删除水平菜单栏和水平线之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17352022/