85

この単純な構造を考えると：

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

このCSSで：

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

ライブデモ： http： //jsfiddle.net/523me/5/

親には20pxパディングがあり、子は水平方向にオーバーフローしていることに注意してください（幅が広いため）。親を右端までスクロールすると、子が親の右端に触れていることがわかります。

したがって、親には正しいパディングが必要ですが、無視されます。子の幅が固定されている場合、親の右側のパディングは適用されないようです。（これは規格で定められていますか？知りたいのですが、何か見つけたら教えてください！）

フローから要素を削除せずに（フローティングまたはポジショニングによって） 、このシナリオで適切なパディングを強制的に適用する方法はありますか？

ここに画像の説明を入力してください

スクリーンショット1-右のパディングは無視されます。これは、現在のすべてのブラウザの動作です。

スクリーンショット2-正しいパディングが適用されます。これが私が達成しようとしていることです。（ところで、スクリーンショットはIE7からのものです。これは、正しいパディングを無視しない唯一のブラウザーです。）

4

5 に答える 5

43

あなたはこの問題に苦しんでいます。

私は子供にマージンを与えることによってそれを解決します（そして親にパディングではありません）：

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}
<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>

于 2012-04-07T14:30:37.460 に答える
9

ダンノしかし追加：

#child{
  display: inline-block;
}

それを修正するようです：http：//jsfiddle.net/523me/6/

私は最新のChromeでのみテストしましたが、クロスブラウザではない可能性があります

于 2012-04-07T14:15:10.070 に答える
8

パディングを境界線に変更する場合があります。

padding: 20px;

に

border: 20px solid gray;
于 2012-04-07T14:17:32.413 に答える
5

いいえ、パディングは無視されませんが、それでも親の内部にあります。

更新されたjsFiddleを参照してください。ここでは、パディングが元の位置から移動していないことがわかります。

編集：うーん、いくつかの異常があります。内側のdivに右マージンを与えると、それも無視されます。うーん。あなたの質問に賛成する。

于 2012-04-07T14:17:59.427 に答える
0

オーバーフローする要素自体にpadding-rightを適用し、背景をその直接の子要素に移動します。

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/

于 2012-04-07T14:29:25.507 に答える