Question

我制作了一个简单的网站，而且我正在努力争取一件事......

确切地说，它是一个菜单导航栏。我已经完成了，但它只是在左下角定位。我想要做的是将色条（＃333）继续到屏幕的最后。这是代码：

＆＃13;

#primary_nav_wrap {
  margin: 0;
  float: left;
}

#primary_nav_wrap ul {
  background-color: #333;
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#rectangle {
  float: right;
  position: relative;
  width: 1200px;
  overflow: hidden;
  background: #333;
}

#primary_nav_wrap ul a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  line-height: 50px;
  padding: 0 20px;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
  background: #4CAF50
}

#primary_nav_wrap ul li:hover {
  background: #282828
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

＆＃13;

<nav id="primary_nav_wrap">
  <ul>

    <li class="current-menu-item"><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">About me</a></li>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">MenuMenu</a></li>
        <li><a href="#">MenuMenuMenu</a></li>
      </ul>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a>
        <ul>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">WutWut</a></li>

        </ul>
      </li>
      <li><a href="#">Contact</a></li>

  </ul>
  <!--
  <div id="rectangle"></div>
  -->
</nav>

＆＃13;

我还在学习CSS，HTML和JS，这是我的第一次尝试......有些代码是我的，有些代码不是，但是嘿..我正在努力学习:) 斗争是将菜单背景颜色（＃333）继续到右侧的末尾。正如你所看到的那样，我试图用一个矩形来做这件事（请不要因此而杀了我）并且没有正确地解决这个问题，... 帮助:(

Answer 1

#primary_nav_wrap {
width: 100%;
background:#333;
}

只需给出100％的宽度并为背景着色

Answer 2

只需将宽度设置为100％#primary_nav_wrap和#primary_nav_wrap ul。

#primary_nav_wrap {
  margin: 0;
  float: left;
  width: 100%;
}

#primary_nav_wrap ul {
  background-color: #333;
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}

#rectangle {
  float: right;
  position: relative;
  width: 1200px;
  overflow: hidden;
  background: #333;
}

#primary_nav_wrap ul a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  line-height: 50px;
  padding: 0 20px;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
  background: #4CAF50
}

#primary_nav_wrap ul li:hover {
  background: #282828
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

<nav id="primary_nav_wrap">
  <ul>

    <li class="current-menu-item"><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">About me</a></li>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">MenuMenu</a></li>
        <li><a href="#">MenuMenuMenu</a></li>
      </ul>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a>
        <ul>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">WutWut</a></li>

        </ul>
      </li>
      <li><a href="#">Contact</a></li>

  </ul>
  <!--
  <div id="rectangle"></div>
  -->
</nav>

CSS响应菜单宽度

2 个答案: