-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

編集：みんなありがとう、今それを動かしました。

4

2 に答える 2

1

体に「margin：0px」を追加します。次に、側面にスペースがあってはなりません。

于 2012-11-22T23:50:33.053 に答える
1

これをスタイルシートに追加してみてください。

body {
    margin: 0;
    padding: 0;
}
于 2012-11-22T23:53:48.607 に答える