html - パディングされた子要素がその親をオーバーフローするのを防ぐ方法は？

Question

この例からわかるように、はinputその親を「オーバーフロー」しているようdivです。input親をオーバーフローさせずにパディングを追加したいと思います。

すべてのブラウザ（IE、Firefox、Chromeなどを含む）に最適なソリューション/回避策を知りたいです。

score 25 · Accepted Answer

あなたはこの答えを見ることができます、しかしあなたがそれを気に入らないならば、あなたはbox-sizingこのようにCSS3プロパティを使うことができます：

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

score 2 · Accepted Answer

パディングは、オブジェクトの幅を増やします。1つのオプションは、入力から左/右のパディングを削除し、テキストインデントを使用することですが、これにより右のパディングが削除されます。

.inside{
    background: blue;
    border: none;
    padding-bottom: 10px;
    padding-top: 10px;
    text-indent: 10px;
    width: 100%;
}

または、パディングにハードコードされたピクセル幅を使用する代わりに、パーセンテージを使用して、幅からその値を差し引くこともできます。

.inside{
    padding: 3%;
    width: 94%;
}

score 0 · Accepted Answer

入力はdiv内にあるように見えますが、左上隅にあります。入力はdivの幅の100％を占めるため、divの赤い背景を覆い隠します。divが長いので、下に突き出て、入力が上にあるように見えます。以下をせよ：

入力ボックスではなく、外側のdivのCSSにパディングを適用します。
必要に応じて入力にマージンを適用することもできますが、含まれているdivをパディングする方が良いと思います。
- 入力ボックスの幅をdivより小さくします（<100％）

score 0 · Accepted Answer

内側のdivの幅を。として指定しないでください100%。divは、その親コンテナの幅に自動的に適合します。デモ

4 に答える 4