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

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

有人可以解释我该怎么做吗？

演示：http://jsfiddle.net/NnCVv/246/

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

试试这个

 <!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>

相关内容

最新更新

热门标签：