我正在使用 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，里面的浮动也没有被清除：
nav {
border-top: 1px solid blue;
border-bottom: 1px solid red;
}
nav:after {
content: "";
display: block;
clear: both;
}
样式表中没有 CSS 可以在
nav您需要添加具有
border-bottomborder-topnavnav {
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;
}
如果您不希望其他元素紧邻
navdisplay: block;clear: both;即使将边框应用于
nav.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
如果您没有给导航高度，您可以使用：
overflow:hidden;它将包裹任何浮动子元素，并将相邻的浮动元素放在一边。
只需使用：
nav {overflow:hidden;border-top:solid;border-bottom:solid;}块元素不需要
width:100%;您可以添加 边框：1px 实心 #000006;