2016-06-10 23 views
0

iam试图将背景色的宽度设置为100%的顶层菜单。 并将我的菜单内容保存在960px的wrap ID中。如何在顶部菜单上使背景100%

有人可以解释我该怎么做。

演示: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; 
} 
+1

有喜欢的就那么像这样的问题万亿美元 - 谷歌这个错误 - 修复服务器端cripts,它会消失 –

+0

几乎所有这些问题都是关于服务器回应html而不是js脚本。 –

+0

但是,您可能只需将php代码写入您的js脚本,而不是将服务器设置为将js文件作为php脚本进行预处理。 –

回答

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> 
+0

有没有一种方法来中心“ul”,所以我们可以在网页 – Pedro

+0

中心的菜单中使用,我可以在我的答案中使用id wrap1上的margin-left,并按需要对齐。 –