2016-06-10 2 views
0

iam은 배경색 너비를 100 %로하여 톱 메뉴를 만들려고합니다. 960px의 내 랩 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

가 SO에이 같은 질문의 수조와 같은있다 시도 - 서버 측 수정 cripts 그리고 그것은 사라질 것입니다 –

+0

거의 모든이 문제는 js 스크립트 대신 html로 응답 한 서버에 관한 것입니다. –

+0

하지만 js 스크립트에 PHP 코드를 작성하고 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를 사용하고 원하는대로 정렬 할 수 있습니다. –

관련 문제