0

水平スクロールバーが不要なときに表示されるため、ブラウザに表示するとイライラする次のコードがあります。

ヘッダーに2つのクラスを追加すると、水平バーがブラウザーに追加されます。誰かが私がバーを取り除くために何を微調整しなければならないか知っていますか？よろしくお願いします。

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

1 に答える 1

1

position: relative;両方で使用して.fbpluginおり.counter、基本的にヘッダーの右側に移動します。を使用position: relativeすると、要素を初期位置から移動しますが、それでも初期位置のスペースを占有します。これが、スクロールバーがある理由です。

代わりにfloat、2つのdivを右側に配置して、ヘッダーの長さに及ばないようにし、マージン/パディングを使用して垂直に配置します。これにより、水平スクロールバーが削除されます。

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

于 2013-02-24T18:20:47.920 に答える