如何使导航栏在页面上延伸（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/或查看以下结构，例如：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS92c0pBTy5qcGcifQ==” alt =“在此处输入图像描述”>

<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

您应该使用

#nav {
width:100%;
}

Answer 5

请确保在您的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 6

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