wie man die navigation bar erstrecken sich über die Seite (HTML)

Es ist nicht genau klar, was Sie hier wollen. Wenn Sie wollen, sind die Navigationsleiste, um weiter über die Seite, die Sie hinzufügen müssen, um die Hintergrundfarbe des übergeordneten div-Element und machen dieses div die gleiche Höhe wie die ul-Liste Elemente:

#nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    background-color: #000000;
    height:40px;
}

Ich habe ein fiddle - http://jsfiddle.net/F6nMg/

Verstehe ich dein problem. dies kann erreicht werden, indem anzeigen:Tabelle auf parent-div und display:table-cell auf alle lis in der navbar.Dann werden alle Verhalten sich wie teable-Zellen und nehmen der Breite nach Platz. Lesen Sie meinen Artikel unter: http://www.aurigait.com/blog/how-to-make-navigation-bar-stretch-across-the-page/
Oder Schauen Sie sich das folgende Struktur Beispiel:

<nav class="main-menu">
    <ul>
        <li><a href="#" title="link1">Small Link</a></li>
        <li><a href="#" title="link2">Another Link</a></li>
        <li><a href="#" title="link3">One Another Link</a></li>
        <li class="sp-width"><a href="#" title="link4">A long link with 40% of total width</a></li>
    </ul>
</nav>

- Und CSS -

ul, li{ list-style:none; margin:0; padding:0;}/*1.1*/
.main-menu ul{background-color:black;} /*1.2*/
.main-menu a{color:white; display:block; padding:5px; text-decoration:none;} /*1.2, 1.3*/
.main-menu a:hover{background -color:#333333; text-decoration:none; color:white;}/*1.2*/
.main-menu > ul{ display:table; width:100%;}  /*2.1, 2.2*/
.main-menu > ul > li{ display:table-cell; border-right:1px solid #d4d4d4;}  /*3.1, 3.2 */
.main-menu > ul > li:last-child{ border-right:none;}/*3.2*/
.main-menu > ul > li > a{ text-align:center;}/*2*/
.sp-width{ width:40%;}

Nun fügen wir 3 weitere links in der es, so die HTML-Struktur wird nun:

<nav class="main-menu">
    <ul>
        <li><a href="#" title="link1">Small Link</a></li>
        <li><a href="#" title="link2">Another Link</a></li>
        <li><a href="#" title="link3">One Another Link</a></li>
        <li><a href="#" title="link">Another Link</a></li>
        <li><a href="#" title="link">Another Link</a></li>
        <li><a href="#" title="link">Another Link</a></li>
        <li class="sp-width"><a href="#" title="link4">A long link with 40% of total width</a></li>
    </ul>
</nav>

Also CSS-änderungen:

.main-menu > ul > li{ display:table-cell; border-right:1px solid #d4d4d4; width:10%;}  /*4*/
.sp-width{ width:40%!important;} /*5*/

Punkte zu beachten:

   1.1. Global Definition
   1.2. Global Definition for Main menu all uls and links. (In case of Sub-menu it will be applied on that sub-menu also)
   1.3. Using display:block, so it will cover entire area of li and whole li will be click-able.
   2.
   2.1. I am using ‘>’(Direct Child) here so if we define any sub-menu inside, this CSS will not work on that.
   2.2. ‘Width’ property is necessary with ‘display:table’. Because default width of display:table is ‘Auto’ means as per the inside    content.
   3.
   3.1.Display:table-cell, divides the total width / remaining width(the un-divided width. In our case it is 100%-40%=60%) equally. It always    need display:table on its parent container.
   3.2. I am using border-right for showing links separately and removing extra border on last-child in the next line.
   4. How width is distributed, if we define it explicitly:
   4.1. If width is more than the average width(100% / No. of links) then it will give that width to first link and then from remaining if    possible then to second link and then rest to other link and if no    width left then to rest of the links as per content (with text    wrapping as default) and remaining width in proportion as we    provided. Example: we have 4 links and we define 50% width for each.    So it will assign 3rd and 4th link as per the content and to 2nd and    1st link remaining width’s 50 %.
   4.2. If width is less than the average width, it will distribute the width equally in all links.
   4.3. If one link is having some specific width and we want all other links with a particular width (Our Case), It will provide the given    width to that link(s) and then remaining width will be divided    equally to all links including the specific width link.
   5. We provide ‘!important’ here because of ‘order of precedence’. The hierarchical definitions have more weight than the class definitions.    And ‘!important’ provides supreme power to class definition so it    will be applied. I will discuss on Order of Precedence in my later    blog.

Stellen Sie sicher, dass in deinen HTML-code, die Listen-Elemente sind unter einem separaten container-element Zuweisen Hintergrundfarbe, um diese neuen container.

Z.B.

CSS:

.container-nav {
  background: #ff3300;
}

HTML:

<header class="container">
  <h1> Monthly Resolutions </h1>
  <h2 class=header-h> Dreaming out loud. Take 30 days at a time</h2>
</header>

<div class="container-nav">
  <nav class="container">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Archives</a>
      </li>
      <li><a href="#">About Me</a>
      </li>
    </ul>
    <div class="clear"></div>
  </nav>
  <!--nav-->
</div>
<!--container-nav-->