Question

我试图做一个顶级菜单，背景颜色的宽度为100％。并将我的菜单内容保存在我的包装ID中，即960px。

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

HTML：

*
{
    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;
}

CSS

{{1}}

Answer 1

试试这个

 <!DOCTYPE html>

<html>


<head> 

   <style>
*
{
    padding: 0px;
    margin: 0px;
}
#banner
{
  width:100%;
  background-color:green;
}
#wrap1
{
background-color:black;
    width: 960px;

}

#wrap
{

    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;
}

</style>
</head>


<body>
 <div id="banner">
<div id="wrap1">


<ul id="wrap">
  <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>

</ul>
</div>
</div>
</body>
</html>

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

1 个答案: