コンテナからはみ出さずにテキスト ボックスの幅を 100% にする方法

100% 幅のテキスト ボックスの境界を克服する

Web 開発では、テキスト ボックスが完全に占有されるようにするというジレンマに遭遇することがよくあります。コンテナの境界を超えずに、意図した幅に収まります。 CSS スタイルに「display:block; width: 100%」を割り当てるのは簡単な解決策のように思えるかもしれませんが、テキスト ボックスのデフォルトの余白、境界線、パディングが原因で予期しない問題が発生する可能性があります。

これは可能性があります。その結果、以下の例に示すように、テキスト ボックスが実際のコンテナ サイズよりも広く表示されます。

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

望ましい効果を達成する

この問題を解決し、テキスト ボックスがコンテナの幅を超えないように、CSS3 ではプロパティ「box-sizing: border-box」を導入しています。これにより、内部パディングと外部境界線の両方を包含するように「幅」の定義が再定義されます。

ただし、CSS3 の進行中の開発により、このプロパティは現在、ブラウザごとに異なる名前になっています。

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

古いブラウザ用の代替アプローチ

ブラウザの互換性が懸念される場合は、代替アプローチとして、含まれている

に 'padding-right' を追加します。または 要素。これにより、ブラウザーが通常入力に割り当てる追加の左右のパディング/境界線がピクセル単位で補正されます (例: IE

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