我有以下代码，当它在浏览器中显示时会很烦人，因为在不需要时会出现水平滚动条。
当我在标题中添加这两个类时，浏览器中会添加水平栏。有谁知道我必须调整什么才能摆脱酒吧？非常感谢。
<html>
<head>
<link href = "style.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id="header">
<img src="uploads/brand.png">
<p><p>
<img src="uploads/rules.png">
<div class="fbplugin">
dsds
</div>
<div class = "counter">
dsds
</div>
</p></p>
</div>
<div id = "divide"></div>
<div id = "body">
<div class = "container">
stuff
</div>
</div>
</body>
</html>
这是 CSS:
#header {
width: 100%;
height: 140px;
}
#divide {
width: 100%;
height: 2px;
background-color: red;
}
#body {
width:100%;
height:1000px;
cursor:pointer;
}
.fbplugin{
position: relative; top: -60px; left: 1000px;
}
.counter{
position: relative; top: -130px; left: 1100px;
}
.container{
width: 600px;
margin-right: auto;
margin-left: auto;
height: 500px;
background-color: white;
}
最佳答案
您在 .fbplugin 和 .counter 上都使用了 position: relative; 将它们移动到标题的右侧.通过使用 position: relative 可以将一个元素从它的初始位置移开，但它仍然占用初始位置的空间。这就是您拥有滚动条的原因。
相反， float 两个 div 向右移动，这样它们就不会跨越标题的长度，并使用边距/填充来垂直放置它们。这将摆脱水平滚动条。
关于html - 在 header 中使用 div 类时出错？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15054935/