如何在顶部菜单上100％制作背景

Question

我正在尝试制作一个顶级菜单，它应该100％填充background-color并且还将我的菜单内容保存在我的包装ID中，即960px。

有人可以解释一下如何做到这一点。

演示：JSFiddle

HTML ：

<div id="wrap">
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  <li><a href="#">Link 9</a></li>
</ul>
</div>

CSS ：

*
{
    padding: 0px;
    margin: 0px;
}

#wrap
{
    width: 960px;
    margin: 0px auto;
    margin: 0px auto;
}

ul
{
    background: navy;
    overflow: hidden;
}

ul li
{
    float: left;
    list-style: none;
}

ul li a
{
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
}

Answer 1

试试这个

＆＃13;

＆＃13;

*
{
    padding: 0px;
    margin: 0px;
}

#wrap
{
    width: 100%;
    margin: 0px auto;
    margin: 0px auto;
}

ul
{
    background: navy;
    overflow: hidden;
}

ul li
{
    float: left;
    list-style: none;
    width:11%;
}


    ul li a {
    display: block;
    padding-top: 20%;
    padding-bottom: 20%;
    color: white;
    text-decoration: none;
  

}

＆＃13;

<div id="wrap">
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  <li><a href="#">Link 9</a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加一个部分作为它的包装。因为您可能希望重新使用wrap将其声明为类。

CSS：

#header {
  background: navy;
}

.wrap {
  width: 960px;
  margin: 0px auto;
  margin: 0px auto;
}

ul {
  overflow: hidden;
}

HTML：

<section id="header">
  <div class="wrap">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
      <li><a href="#">Link 7</a></li>
      <li><a href="#">Link 8</a></li>
      <li><a href="#">Link 9</a></li>
    </ul>
  </div>
</section>

<强> JSFiddle