0

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

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

[补充] 还有一个问题，如果你看到，水平线的左右有间隙。我是否也可以删除此空白以填充整个页面？

谢谢，卡蒂克

4

4 回答 4

2

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

更新：

从正文中删除边距以使hr整个页面一直走。

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

body {
    margin: 0;
}
.nav {
    margin-bottom: 0;
}
于 2013-06-27T19:56:54.523 回答
0

它是用户代理样式表。

对于铬：-webkit-margin-after:

通过设置解决

ul {
    margin: 0;
}
于 2013-06-27T19:56:55.450 回答
0

尝试这个：

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

演示。

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

于 2013-06-27T19:58:26.707 回答
0

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


.nav{
    margin-bottom: 0;   
} 
    
hr{
    margin: 0; 
}
于 2021-04-20T15:16:12.367 回答