如何使导航栏跨页面延伸 (HTML)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16629835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make navigation bar stretch across the page (HTML)
提问by user2277747
I'm having problems with my navigation bar, its not stretching across the page.
我的导航栏有问题，它没有在整个页面上伸展。
Here's the code:
这是代码：
#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>回答by DaveR
It isn't exactly clear what you want here. If you're wanting the nav bar to continue across the page you need to add the background color to the parent div and make this div the same height as the ul list elements:
这里并不完全清楚你想要什么。如果您希望导航栏继续跨页面，您需要将背景颜色添加到父 div 并使该 div 与 ul 列表元素的高度相同：
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #000000;
height:40px;
}
I did a fiddle - http://jsfiddle.net/F6nMg/
我做了一个小提琴 - http://jsfiddle.net/F6nMg/
回答by Aabha Pandey
I understand your problem. this can be achieved by putting display:table on parent div and display:table-cell on all lis in navbar.Then all will behave like teable-cells and take width according to provided space. Read my article at: http://www.aurigait.com/blog/how-to-make-navigation-bar-stretch-across-the-page/Or Look at the below structure for example:
我理解你的问题。这可以通过将 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>
And CSS
和 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%;}
Now lets add 3 more links in it, so HTML Structure will now:
现在让我们在其中再添加 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>
So CSS changes:
所以 CSS 发生了变化：
.main-menu > ul > li{ display:table-cell; border-right:1px solid #d4d4d4; width:10%;} /*4*/
.sp-width{ width:40%!important;} /*5*/
Points to be noted:
需要注意的点：
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.
回答by Explosion Pills
Put the background color on the container of the navigation bar (the div). Then, apply a clearfix to the divbecause the contents are floated. You could probably also use display: inline-block, but you don't have to.
将背景颜色放在导航栏的容器（div）上。然后，对 应用清除修复，div因为内容是浮动的。您可能也可以使用display: inline-block，但您不必这样做。
#nav {
background-color: #000000;
}
#nav:after {
content: "";
clear: both;
display: table;
}
回答by Rajesh Kumar
you should use
你应该使用
#nav {
width:100%;
}
回答by Uday Khandelwal
Make sure in your HTML code, the list elements are under a separate container element, Assign background color to this new container.
确保在您的 HTML 代码中，列表元素位于单独的容器元素下，为这个新容器分配背景颜色。
For e.g.
例如
.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-->