テキスト ボックスをオーバーフローせずにコンテナの 100% に広げる方法

100% 幅のテキスト ボックスの拡張の制御

コンテナの幅全体にまたがるテキスト ボックスが必要になるのが一般的です。これを実現するには、次のようなスタイルを適用します。

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

ただし、このアプローチには課題があります。テキスト ボックスの幅はその内容によって定義されます。テキスト ボックスのデフォルトの余白、境界線、およびパディングにより、テキスト ボックスがコンテナの境界を超えて広がり、見苦しい隙間が生じます。

この問題に対処するには、テキスト ボックスがその幅を満たす方法が必要です。それを超えないように容器に入れてください。解決策の 1 つは、CSS3 プロパティ box-sizing: border-box を利用することです。このプロパティは、外部パディングと境界線を含むように幅の意味を再定義します。

残念ながら、ボックス サイズ変更のサポートはまだ普遍的ではありません。したがって、ブラウザ固有のフォールバック値を含めることができます。

<code class="css">input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

box-sizing を使用する代わりに、囲んでいる要素に padding-right を手動で適用して、期待されるパディングと等しくなるようにすることができます。

どちらのアプローチでも、テキスト ボックスの幅を制御しながら、テキスト ボックスがコンテナの範囲を超えてはみ出るのを防ぐことができます。

以上がテキスト ボックスをオーバーフローせずにコンテナの 100% に広げる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。