Question

我的导航栏（或其他内容）扩展太远并创建了一个水平滚动条。我看到有人问起这个问题，但我无法找到适合我情况的答案。我制作的屏幕越小，空间越大。现在我只是在看IE.11。有人可以帮忙吗？先感谢您。下面是我认为问题所在的代码。（html，page css和parallax css）。

<body>
<div class="wrapper">
  <header class="lighthouse">
    <nav class="main">
      <div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div>
      <div class="top-nav-logo"> <img src="images/mlc-logo/mlcwhite.png" width="97" height="59" alt="Mission Lighthouse Church Logo"/></div>
             <ul>
          <li><a href="index.html">HOME</a></li>
          <li><a href="who-jesus-is.html">WHO JESUS IS</a></li>
          <li><a href="who-we-are.html">WHO WE ARE</a></li>
          <li><a href="media.html">MEDIA</a></li>
          <li><a href="contact.html">CONNECT</a></li>
        </ul>
         </nav>
    <div class="logo"><img src="images/mlc-logo/mlc-main-320.png" width="280" height="167" alt="Mission Lighthouse Church Logo" data-enllax-ratio="-.8" data-enllax-type="foreground"/> </div>
    <div class="seagull"><img src="images/Parallax/seagull2.png" alt="Seagulls" width="276" height="136" class="seagull" data-enllax-ratio="-3" data-enllax-direction="horizontal"  data-enllax-type="foreground"/></div>
    <div class="welcome-home" data-enllax-ratio="-1.1" data-enllax-type="foreground">Welcome Home</div>
  </header>

CSS：

 html, html * {
        padding: 0;
        margin: 0;
    }
    body {
        font-size: 62.5%;
    }
    .wrapper {
        width: 100%;
        background-color: #000000;
        position: absolute;
    }
    .top-nav-logo {
        display: block;
        width: 100%;
        margin: 10px 10px 0 20px;
        position: fixed;
        z-index: 100;
    }
    .menu-icon {
        width: 50%;
        box-sizing: border-box;
        background-color: #000;
        text-align: right;
        padding: 15px 24px;
        cursor: pointer;
        color: #fff;
        display: none;
    }
    nav.main {
        display: inline-block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        max-width: 1341px;
        margin: 0 auto;
        overflow: hidden;
        width: 100%;
        text-align: left;
        z-index: 80;
        }
    nav ul {
        list-style: none;
        text-align: center;
        background-color: rgba(0,0,0,0.0);
        overflow: hidden;
        color: #fff;
        padding: 0;
        margin: 0;
        transition: 1s;
        z-index: 80;
        }
    nav.blue ul {
        background-color: rgba(0,34,73,0.95);
        }
    nav ul li {
        display: inline-block;
        padding: 20px;
        }
    nav ul li a {
        display: inline-block;
        color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 1.7em;
        text-decoration: none;
    }
    nav ul li a:visited {
        color: rgba(240,183,110,1.00);

    }
    nav a:hover {
        color: #F0F694;
        text-decoration: none;
        font-weight: 700;
        transition: 1.7s;
        -webkit-transition: 1.7s; /*Safari*/
    }

CSS for Parallax:

.lighthouse {
    width: 100%;
    height: 768px;
    position: relative;
    background-image: url(../images/Parallax/front-header-4.jpg), url(../images/Parallax/2nd-header-background.jpg);
    background-size: auto 768px, cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
     will-change: transform;
    overflow: hidden;
}
.logo {
    height: 140px;
    width: 88%;
    position: relative;
    top: 170px;
    margin: 0 auto;
    text-align: center;
    opacity: 0.65;
    z-index: 20;
}
.seagull {
    height: 123px;
    width: auto;
    position: relative;
    left: -190px;
    opacity: 0.8;
    z-index: 10;
}
.welcome-home {
    font-family: 'Kaushan Script', cursive;
    font-size: 9.0em;
    color: #004391;
    position: relative;
    text-align: center;
    width: 98%;
    top: 255px;
}

Answer 1

 nav.main {
        display: inline-block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
        width: 100%;
        text-align: left;
        z-index: 80;
        }

在样式表中替换此代码

您输入了max-width：1341px;这就是它到目前为止扩展的原因

Navbar延伸得太远了

1 个答案: