Html5和Css3-水平导航栏问题

我正在设计一个网页。我有两级导航，第一级是社交媒体按钮，之后是导航栏。我有问题的背景颜色的导航栏去整个网页的长度，目前它开始和停止与导航栏。我猜这是一个与clearfix的位置或编码有关的问题？不管怎样，我会感激你的建议。我的代码在下面，我附上了我的网站的照片，所以你可以看到它看起来像什么

我的Html代码：

<div id="wrapper">
  <header id="header" role="banner">
    <div id="logo">
      <a href="index.html"><img src="Images/title.png" alt="logo" width="1018" height="140"></a>
    </div>
    <div id="social">
      <ul>
        <li>
          <a href="https://twitter.com/SaveADHCNSW#" target="_blank"><img src="images/twitter.png" alt="Twitter" width="32" height="32"></a>
        </li>
        <li>
          <a href="https://www.facebook.com/Save-NSW-Government-Disability-
    Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
        </li>
        <li>
          <a href="https://www.youtube.com/channel/UCS0HQwz4LWWGS4AZhb5Ry3w" target="_blank"><img src="images/youtube.png" alt="Youtube" width="32" height="32"></a>
        </li>
      </ul>
    </div>
    <div id="clearfix">
    </div>
    <nav id="page_nav">
      <div class="menu">
        <ul id="navmenu">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="aboutus.html">About Us</a></li>
          <li><a href="#">Get Involved</a><span class="darrow">&#9660;</span>
            <ul class="submenu">
              <li><a href="socialmedia.html">Social Media</a></li>
              <li><a href="unionmeeting.html">Union Meetings</a></li>
              <li><a href="rally.html">Rally</a></li>
            </ul>
          </li>
          <li><a href="#">News</a><span class="darrow">&#9660;</span>
            <ul class="submenu">
              <li><a href="shrewsnews.html">Shrew's News</a></li>
              <li><a href="update.html">Update</a></li>
            </ul>
          </li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contacts.html">Contact Us</a></l>
        </ul>
      </div>
      <div id="clearfix">
      </div>
</div>
</nav>
</header>
</div>

---

更新：

您在CSS

clearfix

中忘记了一些内容

#clearfix:after {
  display: block;
  clear: both;
  content: ''; /* add me */
}

此外，HTML中存在一些错误，这些错误可能会以不同的方式影响在不同浏览器中的呈现

[1]对于

[2]在您的

关闭之前额外的

[3]重复id:

id=“clearfix”

首先，修复重复的ID。在CSS中，更改以下内容：

#clearfix:after {
  display: block;
  clear: both;
}

为此：

.clearfix:after {
  display: block;
  clear: both;
}

这是你的HTML没有错误

<div id="wrapper">
  <header id="header" role="banner">
    <div id="logo">
      <a href="index.html"><img src="Images/title.png" alt="logo" width="1018" height="140"></a>
    </div>
    <div id="social">
      <ul>
        <li>
          <a href="https://twitter.com/SaveADHCNSW#" target="_blank"><img src="images/twitter.png" alt="Twitter" width="32" height="32"></a>
        </li>
        <li>
          <a href="https://www.facebook.com/Save-NSW-Government-Disability-Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
        </li>
        <li>
          <a href="https://www.youtube.com/channel/UCS0HQwz4LWWGS4AZhb5Ry3w" target="_blank"><img src="images/youtube.png" alt="Youtube" width="32" height="32"></a>
        </li>
      </ul>
    </div>
    <div class="clearfix">
    </div>
    <nav id="page_nav">
      <div class="menu">
        <ul id="navmenu">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="aboutus.html">About Us</a></li>
          <li>
            <a href="#">Get Involved</a><span class="darrow">&#9660;</span>
            <ul class="submenu">
              <li><a href="socialmedia.html">Social Media</a></li>
              <li><a href="unionmeeting.html">Union Meetings</a></li>
              <li><a href="rally.html">Rally</a></li>
            </ul>
          </li>
          <li>
            <a href="#">News</a><span class="darrow">&#9660;</span>
            <ul class="submenu">
              <li><a href="shrewsnews.html">Shrew's News</a></li>
              <li><a href="update.html">Update</a></li>
            </ul>
          </li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contacts.html">Contact Us</a></li>
        </ul>
      </div>
      <div class="clearfix">
      </div>
    </nav>
  </header>
</div>

▼







▼

首先，在您关闭导航之前，您有一个额外的结束div标记否该标记关闭我的包装div感谢堆Andy，我没有注意到结束列表标记中的错误。不过背景颜色仍然没有改变，显然我还有其他问题。。。他们可能不得不保持沉默。你很聪明，谢谢你解决了我的问题！非常感谢！

<div id="wrapper">
  <header id="header" role="banner">
    <div id="logo">
      <a href="index.html"><img src="Images/title.png" alt="logo" width="1018" height="140"></a>
    </div>
    <div id="social">
      <ul>
        <li>
          <a href="https://twitter.com/SaveADHCNSW#" target="_blank"><img src="images/twitter.png" alt="Twitter" width="32" height="32"></a>
        </li>
        <li>
          <a href="https://www.facebook.com/Save-NSW-Government-Disability-Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
        </li>
        <li>
          <a href="https://www.youtube.com/channel/UCS0HQwz4LWWGS4AZhb5Ry3w" target="_blank"><img src="images/youtube.png" alt="Youtube" width="32" height="32"></a>
        </li>
      </ul>
    </div>
    <div class="clearfix">
    </div>
    <nav id="page_nav">
      <div class="menu">
        <ul id="navmenu">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="aboutus.html">About Us</a></li>
          <li>
            <a href="#">Get Involved</a><span class="darrow">&#9660;</span>
            <ul class="submenu">
              <li><a href="socialmedia.html">Social Media</a></li>
              <li><a href="unionmeeting.html">Union Meetings</a></li>
              <li><a href="rally.html">Rally</a></li>
            </ul>
          </li>
          <li>
            <a href="#">News</a><span class="darrow">&#9660;</span>
            <ul class="submenu">
              <li><a href="shrewsnews.html">Shrew's News</a></li>
              <li><a href="update.html">Update</a></li>
            </ul>
          </li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contacts.html">Contact Us</a></li>
        </ul>
      </div>
      <div class="clearfix">
      </div>
    </nav>
  </header>
</div>