Question

我一直在努力理解为什么我的网页会这样做，但标题比页面长。即使我使标题短于100％，仍然有空白通过页面的边缘。我已经删除了部分代码，试图找出导致它的原因，但我真的无法弄明白。我会把HTML放在这里，但是CSS太长了，所以我也会留下JSFiddle链接：http://jsfiddle.net/2qVUg/

<body>
<div id="header">
<img src="x" height="66" width="427" id="logo" />
<ul id="unordered">
  <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><input type="text" /></li>
    <li><img src="x" height="15px" width="15px" /></li>
</ul>
</div>
<div id="body">
<div id="main">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
    <div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div>
</div>
<div id="footer"><p></p></div>
</body>

非常感谢。

Answer 1

它是padding-left: 80px上的#header它将标题推到了内容的其余部分

您可以将该内容包装在容器中，如果需要，可以设置margin-left: 80px

JSFIDDLE

Answer 2

jmore009是正确的。你可以

width:100%;

和

padding-left: 80px;

这使得标题100％+ 80px这是不可能的，所以它被推出了收容。

而是将填充添加到徽标图像

标题img {margin-left：80px;} 如果这只是一个图像，但由于你有两个，我会用div（我的偏好）围绕徽标

<div id="logo></div>

#logo{margin-left: 80px;}

OR

添加您已拥有的徽标ID

#logo{margin-left: 80px;}

标题比页面长

2 个答案: