给<nav>一个边框

我使用HTML5元素，所以我使用<nav>标签制作导航栏。我想给<nav>顶部的边框和底部的边框，但代码不会工作。我做错了什么？给<nav>一个边框

这里是我的HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Home</title> 
<link href="css/fphmain.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 

<header> 
</header> 

<div id="content"> 
<nav> 
    <ul> 
    <li><a href="about.html">About</a></li> 
    <li><a href="books.html">Books</a></li> 
    <li><a href="tracts.html">Tracts</a></li> 
    <li><a href="publications.html">Publications</a></li> 
    <li><a href="order.html">Order</a></li> 
    <li><a href="donate.html">Donate</a></li> 
    <li><a href="contact.html">Contact</a></li>  
    </ul> 
</nav> 

</div> 
</body> 
</html>

下面的代码是我的CSS

@charset "utf-8"; 
/* CSS Document */ 

#content { 
    width:980px; 
    margin-right:auto; 
    margin-left:auto; 
} 

nav { 
    width:100%; 
} 

nav ul { 
    margin:0; 
    padding:0; 
} 

nav ul li { 
    float: left; 
    list-style-type: none; 
    padding: 3px 5px 3px 5px; 
} 

nav ul li a { 
    text-decoration:none; 
    color:#000; 
}

来源

2014-04-08 ZSmith16

您还没有添加任何边界CSS和彩车内尚未清除：

nav { 
    border-top: 1px solid blue; 
    border-bottom: 1px solid red; 
} 
nav:after { 
    content: ""; 
    display: block; 
    clear: both; 
}

来源

2014-04-08 22:10:10

即使将它们应用于nav，您也无法正确看到边框，因为您由于浮动列表项目，在nave元素上编辑了一个clearfix。查看Nicolas Gallagher的micro clearfix。

.cf:before, 
.cf:after { 
    content: " "; 
    display: table; 
} 

.cf:after { 
    clear: both; 
}

来源

2014-04-08 22:10:31

样式表中没有会在您的nav元素上创建边框的CSS。

您需要添加CSS和border-bottom和border-top样式规则，以创建此类边框。例如，如果你想有一个黑色边框一个像素厚的顶部和nav元素的底部也就是那么你会应用样式规则像这样：

nav { 
    border-top: 1px solid black; /* in place of the word "black", 
             you can use #000000 or rgb(0,0,0) */ 
    border-bottom: 1px solid black; 
}

如果你不希望其他元素就在nav的旁边（换句话说，如果您希望其他所有元素都位于其上方或下方），那么您可以将display: block;规则与clear: both;一起应用于导航。

来源

2014-04-08 22:18:42 333

如果您没有给您的导航高度，您可以使用：overflow:hidden;。

它会包裹任何漂浮的孩子，并将站在相邻的漂浮元素旁边。

只需使用：nav {overflow:hidden;border-top:solid;border-bottom:solid;}，

没有块元素需要的width:100%;的。

来源

2014-04-08 22:18:54

给<nav>一个边框

回答

相关问题