Question

我有以下代码，当在浏览器中显示时，如果不需要水平滚动条，则会产生刺激性。

当我在标题中添加两个类时，水平条被添加到浏览器中。有人知道我要调整什么来摆脱酒吧？非常感谢提前。

<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;
}

Answer 1

您在position: relative;和.fbplugin上使用.counter基本上将它们移到标题的右侧。通过使用position: relative，您可以从其初始位置移动元素，但它仍占用初始位置的空间。这就是你有滚动条的原因。

而是将float两个div放在右边，这样它们就不会跨越标题的长度并使用边距/填充来垂直定位它们。这将摆脱水平滚动条。

示例：http://jsfiddle.net/AqLMY/2/

在标题中使用div类时出错？

1 个答案: