Question

我正在尝试使用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>

但不知何故，水平线和菜单栏之间有一个空格，我想消除它。我怎么能这样做？

[ADDED] 还有一个问题，如果你看到，水平线的左右两侧有间隙。我可以删除这个空白，以便它填满整个页面吗？

谢谢， Kartic

Answer 1

您需要移除ul底部的边距。

更新

从正文中移除边距，让hr一直穿过整个页面。

http://jsfiddle.net/EBNZM/1/

body {
    margin: 0;
}
.nav {
    margin-bottom: 0;
}

Answer 2

这是用户代理样式表。

适用于Chrome：-webkit-margin-after:

通过设置

解决

ul {
    margin: 0;
}

Answer 3

试试这个：

.nav{
    margin-bottom: 0;
    ...
}

Demo.

它只是删除菜单的下边距并删除距离。简单：）

Answer 4

导航栏底部和水平线的边距必须为 0。


.nav{
    margin-bottom: 0;   
} 
    
hr{
    margin: 0; 
}

删除水平菜单栏和水平线之间的空格

4 个答案:

更新