HTML – 如何使导航栏全宽_html-js-css

概述我想让我的导航栏延伸到浏览器的边缘.我可以通过逐像素指定宽度来做到这一点,但是当我使width =“100％”时它不起作用它在底部显示滚动条…..所以我怎样才能使它延伸到浏览器的窗口大小水平？这是Demo <html><head><style type="text/css">body { margin-left: 0px; margin-top: 0px; m 我想让我的导航栏延伸到浏览器的边缘.我可以通过逐像素指定宽度来做到这一点,但是当我使wIDth =“100％”时它不起作用它在底部显示滚动条…..所以我怎样才能使它延伸到浏览器的窗口大小水平？ @H_404_7@

@H_404_7@这是Demo

@H_404_7@

<HTML><head><style type="text/CSS">body {    margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;}#nav {    float: left;    Font: bold 12px Arial,Helvetica,sans-serif;    border: 1px solID #121314;    border-top: 1px solID #2b2e30;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 0px;    overflow: hIDden;    wIDth:100%;}#nav ul {    margin:0;    padding:0;    List-style:none;}#nav ul li {    float:left;}#nav ul li a {    float: left;    color:#d4d4d4;    padding: 15px 97px;    text-decoration:none;    background:#3C4042;    background: -webkit-gradIEnt( linear,left bottom,left top,color-stop(0.09,rgb(59,63,65)),color-stop(0.55,rgb(72,76,77)),color-stop(0.78,rgb(75,77,77)) );    background: -moz-linear-gradIEnt( center bottom,65) 9%,77) 55%,77) 78% );    background: -o-linear-gradIEnt( center bottom,77) 78% );    Box-shadow: 0 1px 0 rgba(255,255,0.1) inset,0 0 5px rgba(0,0.1) inset;    border-left: 1px solID rgba(255,0.05);    border-right: 1px solID rgba(0,0.2);    text-shadow: 0 -1px 1px rgba(0,0.6);}#nav ul li a:hover,#nav ul li:hover > a {    color: red;    background:#3C4042;    background: -webkit-gradIEnt( linear,rgb(77,79,79)),rgb(67,70,71)),rgb(69,71)) );    background: -moz-linear-gradIEnt( center bottom,79) 9%,71) 55%,71) 78% );    background: -o-linear-gradIEnt( center bottom,71) 78% );    text-shadow: 0 1px 0 rgba(255,0.2),0 -1px #000;}#nav li ul a:hover,#nav ul li li:hover > a  {color: #2c2c2c;    background: #5C9ACD;    background: -webkit-gradIEnt( linear,color-stop(0.17,rgb(61,111,177)),color-stop(0.51,rgb(80,136,199)),color-stop(1,rgb(92,154,205)) );    background: -moz-linear-gradIEnt( center bottom,177) 17%,199) 51%,205) 100% );    background: -o-linear-gradIEnt( center bottom,205) 100% );    border-bottom: 1px solID rgba(0,0.6);    border-top: 1px solID #7BAED9;    text-shadow: 0 1px rgba(255,0.3);} #nav li:hover ul {    left: auto;}#nav li li:hover ul {    visibility:visible;}</style></head><body><div ID="nav" > <ul > <li wIDth="300px" ><a href="#">Home</a></li> <li><a href="#">Sell</a> <li><a href="#">Services</a> <li><a href="#">Contact Us</a></li> <li><a href="#">Sign In/Register</a></li> </ul> </div>

解决方法我想你试着用’ul li a’代替’ul li’元素.正如上面提到的那样,给每个li元素20％,使用’Box-sizing：border-Box’来设置所有内容,然后你准备好了;)
在这里你可以看到解决方案： http://codepen.io/czaras/pen/Auqtn 总结

以上是内存溢出为你收集整理的HTML – 如何使导航栏全宽全部内容，希望文章能够帮你解决HTML – 如何使导航栏全宽所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1060235.html