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

表示付き入力: ブロックがブロックのように動作しない

CSS で、要素に display: block を設定すると、それがブロックとして指定されます。 level 要素。利用可能な水平方向のスペースを埋める必要があります。ただし、これを入力要素に適用すると、div などの通常のブロック要素のように動作しません。これは、入力要素のレンダリング方法に問題があるためです。

幅: 自動が期待どおりに動作しない

入力要素の幅: 自動の設定は強制されません。 div 要素と同様にコンテナの幅を埋めるために使用します。これは、入力要素にデフォルトで固有の寸法とパディングがあり、width プロパティをオーバーライドするためです。

入力幅の拡張を実現

入力を利用可能な幅に埋めるには、次のオプションを使用できます:

• 固定幅: これは、入力内のさまざまなコンテンツを考慮していないため、理想的な解決策ではありません。
• ラッパーの回避策: 入力の周囲にラッパー要素を使用すると、回避策が提供されます。しかし、不要な HTML マークアップが追加されます。
• Box-Sizing: Border-Box: CSS3 box-sizing プロパティが導入されました。これにより、border-box に設定された場合、要素の幅の計算にパディングとボーダーを含めることができます。

.input-width-full {
  box-sizing: border-box;
  width: 100%;
}

レガシー ブラウザのサポート

CSS3 ボックス サイズ変更をサポートしていないブラウザの場合、動作ファイル (.htc) を使用して、ボーダーボックスモデル。これには、Internet Explorer 6 および 7 を対象とする条件付きコメントを使用する必要があります。

これらの技術を利用することで、任意のパディングや境界線を使用しても、コンテナーの幅を満たすように動的に拡張する入力を作成できます。より柔軟で一貫性のある CSS レイアウトを確保します。

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