「display: block」で入力要素がコンテナの幅いっぱいにならないのはなぜですか?

入力要素が 'Display:block' でブロック コンテナの幅に拡張されない

入力要素に 'display:block' を割り当てているにもかかわらず、 div のように動作せず、コンテナーの幅を埋めることはできません。この逸脱は、CSS の入力要素の固有の動作に起因します。

CSS では、通常、「display:block」により要素が拡張され、利用可能な幅全体を占有することが許可されます。ただし、input 要素は、デフォルトの表示モードとして「display:inline」を持つように設計されています。これは、パディングや境界線を含むコンテンツの幅のみを占めることを意味します。

この問題を解決し、入力要素に強制的に幅を埋めるには、「width:100%」を使用できます。ただし、このアプローチは、入力にゼロ以外のパディングと境界線がある場合、最終的な幅が 100% を超えるため、問題が発生する可能性があります。

CSS3 'box-sizing を使用したクロスブラウザー ソリューション'

包括的な解決策には、CSS3 の比較的知られていない 'box-sizing:border-box' プロパティの使用が含まれます。このプロパティにより、入力要素 (またはその他の要素) の幅にパディングと境界線が確実に含まれるようになります。

提供されている CSS コードの修正バージョンは次のとおりです。

form { display: block; margin: 0; padding: 0; width: 50%; border: 1px solid green; overflow: visible }
div, input { display: block; border: 1px solid red; padding: 5px; width: 100%; font: normal 12px Arial; }

.bb {
    box-sizing: border-box; /* CSS 3 rec */
    -moz-box-sizing: border-box; /* Firefox 2 */
    -ms-box-sizing: border-box; /* Internet Explorer 8 */
    -webkit-box-sizing: border-box; /* Safari 3 */
    -khtml-box-sizing: border-box; /* Konqueror */
}

「.bb」クラスを入力要素に追加すると、ブラウザ間の互換性のために「box-sizing:border-box」を有効にすることができます。これにより、パディングや境界線に関係なく、入力要素が常に利用可能な幅全体を占めるようになります。

追加メモ:

1. Internet Explorer 6 および7 は CSS3 'box-sizing' をサポートしていませんが、動作スクリプトを使用して有効にすることができます。
2. 「box-sizing:border-box」プロパティは、Google Chrome、Firefox、Safari、Opera などのほとんどの最新ブラウザでサポートされています。

以上が「display: block」で入力要素がコンテナの幅いっぱいにならないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。