我正在使用 HTML5 元素，所以我正在使用 <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;
}
最佳答案
你没有添加任何边框 CSS，里面的 float 也没有被清除:
nav {
border-top: 1px solid blue;
border-bottom: 1px solid red;
}
nav:after {
content: "";
display: block;
clear: both;
}
关于css - 给 <nav> 一个边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22949149/