2012-11-22 59 views
-1

我試圖讓水平菜單欄在屏幕上完全伸展而沒有任何間隙。到目前爲止,它在某種程度上是有效的,但是在最左邊還有一個小差距。如何使網站水平伸展

以下是我的代碼。

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Design</title> 
<link href="CSS/page2.css" rel="stylesheet" type="text/css" /> 
<link href="CSS/main.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="main"> 
<div id="header"> 

<div id="menu"> 

<ul id="ulmenu"> 
<li>Home</li> 
<li>Portfolio</li> 
<li>About Me</li> 
<li>Contact</li> 
</ul> 

</div> 

<br /> 

</div> 


<div id="content"> 
<br /> 
<br /> 
<br /> 


</div> 

<br /> 
<br /> 


</div> 

</body> 
</html> 

CSS:

@charset "utf-8"; 
#main { 
position: fixed; 
margin-top: -17px; 
height: 100%; 
width: 100%; 
margin-right: auto; 
margin-left: auto; 
float: left; 
padding-left: -15px; 
} 
#main #header { 
font-family: "Arial Black", Impact, Arial, sans-serif; 
width: 100%; 
height: 59px; 
z-index: 30; 
position: fixed; 
margin-top: auto; 
margin-left: auto; 
background-color: #CCC; 
margin-right: auto; 
float: left; 
} 
#main #header #menu { 
background-color: #960; 
height: 50px; 
position: relative; 
width: 800px; 
margin-right: auto; 
margin-left: auto; 
margin-top: -7px; 
} 
#main #header #menu ulmenu { 
color: #FFF; 
list-style-type: none; 
margin-right: auto; 
margin-left: auto; 
text-align: center; 
padding-top: 10px; 
} 
#main #header #menu ul li { 
    display: inline; 
text-align: center; 
margin-right: 30px; 
margin-left: 30px; 
font-family: "Arial Black", Gadget, sans-serif; 
color: #FC0; 
font-size: 24px; 
} 
#main #content { 
width: 900px; 
margin-top: auto; 
margin-right: auto; 
margin-left: auto; 
height: auto; 
} 

從上面的代碼,這是要對這個最好的方法?

鏈接到頁面本身。

http://carerra.ulmb.com/page2.html

編輯:感謝球員,得到了現在的工作。

+2

演示鏈接是廣告的全部!和彈出窗口。 – Enrico

+1

我愛Adblock,沒有看到任何東西;) – Gnietschow

回答

1

將「margin:0px」添加到您的身體。那麼雙方不應該有空間。

1

嘗試添加到您的樣式表;

body { 
    margin: 0; 
    padding: 0; 
}