幅 100% のテキスト ボックスをコンテナ内に含めることはできますか?

コンテナ内のテキスト ボックスの幅の制御

Web 開発では、テキスト ボックスがコンテナの幅を満たすことが望ましい場合がよくあります。ただし、ブラウザによって追加されたマージン、境界線、およびパディングにより、100% 幅のテキスト ボックスがコンテナの境界を超えてしまう可能性があります。

100% 幅のテキスト ボックスを含めることはできますか?

はい、CSS3 プロパティ box-sizing: border-box を利用することで、外部パディングとボーダーを考慮して「幅」を再定義できます。

CSS 実装

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

このソリューションは、テキスト ボックスの幅の計算にパディングとボーダーが占める余分なスペースを含めることによって機能します。

非 CSS3 ブラウザーのフォールバック

古いブラウザの場合、別の方法は、それを囲んでいるコンテナに特定の量の右パディングを追加することです:

#container {
    padding-right: 6px;
}

パディング量は、IE バージョン 8 より前の場合、通常 6px です。

以上が幅 100% のテキスト ボックスをコンテナ内に含めることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。