Question

我有这段代码：

<style>
body {
background-color: yellow;
width: 100%;
}
h1 {
color: red;
font-size: 50px;
}
p {
font-size: 20px;
}
</style>

<h1>Title</h1>
<p>Content</p>

我的所有代码都应该放在一个HTML页面中，但页面底部会出现一个水平滚动条。有帮助吗？感谢。

＆＃13;

body {
  background-color: yellow;
  width: 100%;
}
h1 {
  color: red;
  font-size: 50px;
}
p {
  font-size: 20px;
}

＆＃13;

<h1>Title</h1>
<p>Content</p>

＆＃13;

Answer 1

删除体宽位。它不是必需的，默认情况下浏览器会向边缘添加一点点，这意味着它将超过100%，因此您必须有一个水平滚动条。

卸下：

body {
  width: 100%;
}

Answer 2

尝试将margin:0添加到body规则。您已将body设置为占据窗口宽度的100％，但边距不被视为宽度测量的一部分，因此它略大于窗口。如果您想在内容周围留出一些空间，请使用padding。

有关此内容的更多信息，请阅读CSS框模型。

Answer 3

您应该删除此fiddle中的width:100%。

或者您可以保持宽度：100％并添加margin:0;像here这样的身体。

水平滚动条？

3 个答案: