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

在你的nav css中

width:100%;

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

position:fixed;

在你的导航中添加

list-style:none;

此外，您还需要进入一个小小的过程中。标签

所以它

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

我在这里为你添加了一个小提琴http://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添加到导航栏。要使窗口的导航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;    
}

使导航栏跨越页面的宽度

3 个答案: