使导航栏跨越页面的宽度

Question

我已经创建了一个导航栏，但是在不同的屏幕长度上调整大小和使用它总是会失败...如何创建一个导航栏，它可以在任何屏幕上跨越页面的宽度，而无需在任何地方移动, 谢谢 =)

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

我对 html 也有些陌生，所以如果有任何其他我应该添加或更改的内容，请告诉我。

Answer 1

在您的导航中 css

width:100%;

此外，如果您希望它始终位于顶部，请添加

position:fixed;

在您的导航栏中添加

list-style:none;

你的 li 也需要在 'ul' 标签中

所以会是

<ul>
  <li></li>
</ul>

我在这里给你加了一个fiddlehttp://jsfiddle.net/k919k4Lk/

Answer 2

如果您正在开发响应式网站，我建议您使用 Bootstrap 之类的框架。它有自己的导航栏元素，就像您正在开发的一样，开箱即用。它将为您节省很多时间。

Answer 3

JSFIDDLE DEMO

您的HTML无效。将您的 HTML 更改为：

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

将此 CSS 添加到导航栏。要使 window 的导航 100% 宽度：

nav {
    margin: 0 0 0 0;
    font-family: Arial;
    font-size: 100%;
    width: 100%;
    overflow: hidden;
 }

然后您需要设置导航的 ul 和 li 的样式：

 nav ul{
    list-style: none;
 }
 nav ul li {
    float: left;
    width: 20%;
 }

我添加了这个小重置来重置浏览器的默认样式，但推荐 Eric Meyer's reset。

*{
    margin: 0;
    padding: 0;
    line-height: 1;    
}

使导航栏跨越页面的宽度

Making the nav bar span the width of the page

html

css

navbar