如何使導航欄橫跨頁面（HTML）

Question

我的導航欄有問題，它沒有延伸到整個頁面。

這是代碼：

 #nav { list-style: none; font-weight: bold; margin-bottom: 10px; width: 100%; text-align: center; } #nav ul { list-style-type: none; margin: 0px; padding: 0; } #nav li { margin: 0px; display: } #nav li a { padding: 10px; text-decoration: none; font-weight: bold; color: #FFFFFF; background-color: #000000; float: left } #nav li a:hover { color: #FFFFFF; background-color: #35af3b; }

 <div id="nav"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Music</a> </li> <li><a href="#">Education</a> </li> <li><a href="#">Fun</a> </li> <li><a href="#">Entertainment</a> </li> <li><a href="#">Utilities</a> </li> </ul> </div>

Answer 1

這里並不完全清楚你想要什么。 如果您希望導航欄繼續跨頁面，您需要將背景顏色添加到父 div 並使該 div 與 ul 列表元素的高度相同：

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

我做了一個小提琴 - http://jsfiddle.net/F6nMg/

Answer 2

將背景顏色放在導航欄的容器（div）上。 然后，對div應用 clearfix，因為內容是浮動的。 您可能還可以使用display: inline-block ，但您不必這樣做。

#nav {
    background-color: #000000;
}

#nav:after {
    content: "";
    clear: both;
    display: table;
}

http://jsfiddle.net/ExplosionPIlls/DY6Nb/

Answer 3

我理解你的問題。 這可以通過將 display:table 放在父 div 上並將 display:table-cell 放在導航欄中的所有 lis 上來實現。然后所有這些都將像 teable-cells 一樣並根據提供的空間占用寬度。 閱讀我的文章： http : //www.aurigait.com/blog/how-to-make-navigation-bar-stretch-across-the-page/或查看以下結構，例如：

<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>

和 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%;}

現在讓我們在其中再添加 3 個鏈接，因此 HTML 結構現在將：

<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>

所以 CSS 發生了變化：

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

需要注意的點：

   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.

Answer 4

確保在您的 HTML 代碼中，列表元素位於單獨的容器元素下，為這個新容器分配背景顏色。

例如

 .container-nav { background: #ff3300; }

 <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-->

Answer 5

如果您希望導航欄始終出現在屏幕頂部，請使用此選項（就像 stackoverflow 的導航欄；）

#nav {
      overflow: hidden;
      display: flex;
      flex-direction: row;
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      width: 100%;
}

Answer 6

你應該使用

#nav {
width:100%;
}

Answer 7

hdhxfyadghufhdghfjhy dajf uadh fjhdlfjadhfl adjkfh djfh pqieuieurhlkdjfhaldkjfh ladkjfhaldkjf hldkjfh ajld fhuerpiuyhrp; qk ljhdldkjafdff