コンテナからはみ出さずにテキストボックスの幅を 100% にする方法-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-04 09:14:02

オリジナル

805 人が閲覧しました

How to Make Text Boxes 100% Width Without Overflowing Their Container?

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 サイトの他の関連記事を参照してください。