Html 删除水平菜单栏和水平线之间的空间
我正在尝试使用html和css在水平线上方创建一个水平菜单栏。下面是我的代码-Html 删除水平菜单栏和水平线之间的空间,html,css,Html,Css,我正在尝试使用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
<!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>
CSS水平导航栏
.导航
{
浮动：对；
填充：0；
列表样式：无；
背景色：#EDF2F8；
边框底部：1px实心#99CCFF；
边框顶部：1px实心#99CCFF；
}
李国荣先生
{
浮动：对；
}
李娜先生
{
显示：块；
垫面：5px；
垫底：5px；
右边填充：10px；
左侧填充：10px；
文字装饰：无；
字体：小写/1.3 Arial，Helvetica，无衬线；
字体大小：粗体；
颜色：#104E8B；
左边框：1px实心#99CCFF；
}
李娜：悬停
{
颜色：#B03060；
背景色：#ffffff；
}
人力资源
{
边框：1px实心#BDBDBD；
}
-
还有一个问题，若你们看到的话，水平线的左右两边都有间隙。我能把这个空白也去掉吗，这样它就能填满整页了 谢谢，
Kartic您需要删除
ulhr这是用户代理样式表 对于Chrome:
-webkit页边距后：ul {
margin: 0;
}
.nav{
margin-bottom: 0;
...
}
它只是删除菜单的底部边距和距离。简单：）导航栏底部和水平线的边距必须为0
.导航{
页边距底部：0；
}
人力资源{
保证金：0；
}
）。我可以把这个空白也去掉吗？这样它就可以填满整个页面了吗？你用的是a吗？如果你不这样做，你应该这样做。
.nav{
margin-bottom: 0;
...
}