Question

我正在尝试使水平菜单条在屏幕上完全伸展，没有任何间隙。到目前为止，它有点工作，但最左边有一个小的差距。

以下是我的代码。

<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

编辑：谢谢大家，现在就开始工作了。

Answer 1

为您的身体添加“margin：0px”。那边不应该有任何空间。

Answer 2

尝试将其添加到样式表中;

body {
    margin: 0;
    padding: 0;
}

如何使网站水平拉伸

2 个答案: