使导航栏跨越页面的宽度 [英] Making the nav bar span the width of the page
本文介绍了使导航栏跨越页面的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建了一个导航栏，但调整大小和使用不同的屏幕长度总是会抛出它...如何创建一个导航栏，跨越任何屏幕上的页面宽度，而无需在任何地方移动，谢谢=）
HTML：
< title>布伦海姆地震< / title>
< link rel =快捷图标type =image / x-iconhref =wav.png>
< link rel = stylesheet href =stylesheet.csstype =text / css>
< center> < img src =地震的地震US.pngstyle =width：360px> < /中心]，[
< / head>
< body bgcolor =gray>
< nav>
< li> < a href =http://www.geonet.org.nz/quakes/felt>当前地震< / a> < /锂>
< li> < a href =http://www.dropcoverholdon.org/>下降！盖！等一下！ < / A> < /锂>
< li> < a href =https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd： 0x0a00ef88e796a530\" >布伦海姆的位置< / a> < /锂>
< li> < a href =＃>关于我们< / a> < /锂>
< li> < a href =bibliography.html>参考书目< / a> < /锂>
< / nav>
< img src =img1.pngwidth =100％>
< p>< center>
段落
< / center>< / p>
< img src =img2.pngwidth =100％>
< p>< center>
第2段
< / center>< / p>
< img src =img3.pngwidth =100％>
< p> <中心]，[
Parapgraph 3
< / center>< / p>
CSS：
h1 {
font-family：Arial;
font-size：50px;
font-weight：bold;
颜色：黑色;
text-align：;
宽度：100％;
float：center;
保证金：0 0 0 0;
padding：0;
list-style：none;
}
body {
color：white;
font-family：Arial;
font-size：20px;
保证金：0 0 0 0;
最大宽度：100％;
}
/ *导航栏样式* /
nav {
margin：0 0 0 0;
font-family：Arial;
font-size：100％;
}
nav li {
float：left;
}
nav li a {
background-color：black;
display：block;
padding：0 0;
text-decoration：none;
font-weight：bold;
颜色：白色;
border-right：1px纯灰色;
}
nav li a：hover {
color：black;
背景颜色：白色;
$ b $导航栏样式* /
I对于html来说，它也有点新，所以如果还有其他的东西需要添加或者更改，请告诉我。
解决方案
您的HTML无效。将你的HTML改为：
< body bgcolor =grey>
< nav>
< ul>
< li> < a href =http://www.geonet.org.nz/quakes/felt>当前地震< / a>
< / li>
< li> < a href =http://www.dropcoverholdon.org/>下降！盖！等一下！ < / A>
< / li>
< li> < a href =https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd： 0x0a00ef88e796a530\" >布伦海姆的位置< / a>
< / li>
< li> < a href =＃>关于我们< / a>
< / li>
< li> < a href =bibliography.html>参考书目< / a>
< / li>
< / ul>
< / nav>
< img src =img1.pngwidth =100％>
< p>
< center>段落< / center>
< / p>
< img src =img2.pngwidth =100％>
< p>
< center>段落2< / center>
< / p>
< img src =img3.pngwidth =100％>
< p>
< center> Parapgraph 3< / center>
< / p>
< / body>
将此CSS添加到导航栏中。使窗口宽度 100％宽度
nav {
保证金：0 0 0 0;
font-family：Arial;
font-size：100％;
宽度：100％;
overflow：hidden;
$ / code> 然后，您需要对导航的 ul 和 li ：
nav ul {
list-style：none;
}
nav ul li {
float：left;
width：20％;
}
我添加了这个小复位来重置浏览器的默认样式，但会推荐 Eric Meyer的重置。
* {
margin：0;
padding：0;
line-height：1;
}
I have created a nav bar, but resizing and using on different screen lengths always throws it off... How do I create a nav bar that'll span the width of the page on any screen without moving around anywhere, thanks =)
HTML:
<title>Earthquakes In Blenheim</title>
<link rel="shortcut icon" type="image/x-icon" href="wav.png">
<link rel=stylesheet href="stylesheet.css" type="text/css">
<center> <img src="EARTHQUAKES THAT SURROUND US.png" style="width:360px"> </center>
</head>
<body bgcolor="gray">
<nav>
<li> <a href="http://www.geonet.org.nz/quakes/felt"> Current Earthquakes </a> </li>
<li> <a href="http://www.dropcoverholdon.org/"> Drop! Cover! Hold On! </a> </li>
<li> <a href="https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd:0x0a00ef88e796a530"> Location of Blenheim </a> </li>
<li> <a href="#"> About Us </a> </li>
<li> <a href="bibliography.html"> Bibliography </a> </li>
</nav>
<img src="img1.png" width="100%">
<p><center>
paragraph
</center></p>
<img src="img2.png" width="100%">
<p><center>
paragraph 2
</center></p>
<img src="img3.png" width="100%">
<p> <center>
Parapgraph 3
</center></p>
CSS:
h1 {
font-family: Arial;
font-size: 50px;
font-weight: bold;
color: black;
text-align: ;
width: 100%;
float: center;
margin: 0 0 0 0;
padding: 0;
list-style: none;
}
body {
color: white;
font-family: Arial;
font-size: 20px;
margin: 0 0 0 0;
max-width: 100%;
}
/* Navigation Bar Styling */
nav {
margin: 0 0 0 0;
font-family: Arial;
font-size: 100%;
}
nav li {
float: left;
}
nav li a {
background-color: black;
display: block;
padding: 0 0;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid gray;
}
nav li a:hover {
color: black;
background-color: white;
}
/* Navigation Bar Styling */
I'm also somewhat new to html, so if there is anything else that I should add or change, please let me know.
解决方案
Your HTML is invalid. Change your HTML to this:
<body bgcolor="gray">
<nav>
<ul>
<li> <a href="http://www.geonet.org.nz/quakes/felt"> Current Earthquakes </a>
</li>
<li> <a href="http://www.dropcoverholdon.org/"> Drop! Cover! Hold On! </a>
</li>
<li> <a href="https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd:0x0a00ef88e796a530"> Location of Blenheim </a>
</li>
<li> <a href="#"> About Us </a>
</li>
<li> <a href="bibliography.html"> Bibliography </a>
</li>
</ul>
</nav>
<img src="img1.png" width="100%">
<p>
<center>paragraph</center>
</p>
<img src="img2.png" width="100%">
<p>
<center>paragraph 2</center>
</p>
<img src="img3.png" width="100%">
<p>
<center>Parapgraph 3</center>
</p>
</body>
Add this CSS to the nav. To make the nav 100% width of the window:
nav {
margin: 0 0 0 0;
font-family: Arial;
font-size: 100%;
width: 100%;
overflow: hidden;
}
Then you need to style the nav's ul and li:
nav ul{
list-style: none;
}
nav ul li {
float: left;
width: 20%;
}
I added this little reset to reset the browsers default styling but would recommend Eric Meyer's reset.
*{
margin: 0;
padding: 0;
line-height: 1;
}
这篇关于使导航栏跨越页面的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
