Question

我正在使用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;
}

Answer 1

您没有添加任何边框CSS，并且内部的浮动内容尚未清除：

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

Answer 2

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

您需要添加带有border-bottom和border-top样式规则的CSS，以创建此类边框。例如，如果您想要在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;。

Answer 3

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

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

.cf:after {
    clear: both;
}

Answer 4

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

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

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

块元素不需要width:100%;。

给<nav>一个边框</nav>

4 个答案: