ワイド テキスト ボックスがコンテナを超えて拡張されないようにするにはどうすればよいですか?

幅の広いテキスト ボックスがコンテナを拡張しすぎないようにする

コンテナの幅全体にわたるテキスト ボックスを作成しようとすると、一般的な問題が発生します。テキスト ボックスはコンテナの境界を越えて拡張される場合があります。これは、ブラウザがデフォルトでマージン、境界線、およびパディングを割り当て、テキスト ボックス全体の幅が効果的に増加するためです。

次の例を考えてみましょう。

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide" />
    <input type="text" class="normal" />
    <div style="clear:both;"></div>
  </div>
</div></code>

<code class="css">#outer {
  border: 1px solid #000;
  width: 320px;
  margin: 0px;
  padding: 0px;
}
#inner {
  margin: 20px;
  padding: 20px;
  background: #999;
  border: 1px solid #000;
}
input.wide {
  display: block;
  margin: 0px;
  width: 100%;
}
input.normal {
  display: block;
  float: right;
}</code>

このシナリオでは、 「ワイド」クラスのテキスト ボックスはコンテナを超えて広がりますが、「ノーマル」クラスのテキスト ボックスはコンテナの端に正確に位置合わせされます。過度の拡張を防ぐために、CSS3 で導入された「box-sizing」プロパティが解決策を提供します。

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

「box-sizing」を「border-box」に設定すると、テキスト ボックスの幅が次のように定義されます。外部パディングとボーダーが含まれます。これにより、テキスト ボックスが境界を越えることなくコンテナの幅全体を占めるようになります。

残念ながら、「box-sizing」は CSS3 プロパティであるため、ブラウザの互換性は異なる場合があります。仕様プロセスが進行中であるため、ブラウザーは異なる一時的な名前を採用しています。Mozilla の場合は「moz-box-sizing」、WebKit ベースのブラウザーの場合は「webkit-box-sizing」です。

古いバージョンの代替アプローチブラウザでは、親要素 (「div」や「td」など) に「padding-right」を適用する必要があります。これは、入力要素内のデフォルトのパディングとボーダーによって占有される追加のスペースに対応するのに役立ちます。ただし、必要な「パディングライト」の量は、使用するブラウザによって異なる場合があります。

以上がワイド テキスト ボックスがコンテナを超えて拡張されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。