Making the nav bar span the width of the page

问题

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.

回答1:

JSFIDDLE DEMO

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

回答2:

In your nav css

width:100%;

Also if you want it to always be on top add

position:fixed;

In your nav li add

list-style:none;

Also your li's need to be in a 'ul' tag

so it'd be

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

I added a fiddle here for you http://jsfiddle.net/k919k4Lk/

回答3:

If you're developing an responsive website I suggest using a framework such as Bootstrap. It has it's own element for navigation bars like the one you're developing, right out of the box. It will save you a lot of time.

来源：https://stackoverflow.com/questions/29538290/making-the-nav-bar-span-the-width-of-the-page

标签

html

css

navbar