Дайте <nav> границу

Question

Дайте <nav> границу

0

Я использую элементы 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;
}

ZSmith16 09 апр. 2014, в 00:54

Источник

Теги:

html

css

html5

nav

border

4 ответа

Ещё вопросы

laptou · Answer 1 · 2014-04-08T20-24-00.000Z

В вашей таблице стилей нет CSS, который создавал бы границу вашего элемента nav.

Вам нужно добавить 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; ,

Sunny Patel · Answer 2 · 2014-04-08T19-45-00.000Z

Вы не добавили CSS рамки, и поплавки внутри не были очищены:

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

Josh Rutherford · Answer 3 · 2014-04-08T20-51-00.000Z

Вы не можете правильно видеть границы, даже если они применяются к nav поскольку для элемента nave требуется clearfix, из-за элементов с плавающим списком. Ознакомьтесь с Nicolas Gallagher micro clearfix.

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

.cf:after {
    clear: both;
}

G-Cyr · Answer 4 · 2014-04-08T19-55-00.000Z

если вы не придаете высоту своему nav, вы можете использовать: overflow:hidden; ,

Он будет обертывать любого флотационного дочернего элемента и будет стоять в стороне от смежного элемента floatting.

просто используйте: nav {overflow:hidden;border-top:solid;border-bottom:solid;},

нет необходимости в width:100%; для элемента блока.