入力要素で「display: block」が期待どおりに動作しないのはなぜですか?

表示に関する入力要素の特徴を理解する: Block

CSS では、要素の表示プロパティを block に設定すると、要素がブロックレベルの要素。通常、コンテナの幅全体に広がります。ただし、このプロパティを入力要素に適用すると、予期しない動作が発生する可能性があります。

問題

表示: ブロックがテキスト入力に適用される場合 ())、典型的なブロックレベル要素のように動作しません。代わりに、入力のディメンションは変更されず、テキスト ラベルのみが 1 行に表示されます。

Div のように機能しないのはなぜですか?

この矛盾は次のとおりです。これは、入力要素がレンダリングされる独特の方法によるものです。主にコンテンツのレイアウトを目的とした div とは異なり、入力フィールドはユーザーの操作とデータ入力を目的として設計されています。そのため、これらには独自のデフォルト スタイルのセットがあり、display: block プロパティをオーバーライドします。

目的の効果を達成する

入力フィールドを取得して、 div のようなコンテナーの幅を指定するには、デフォルトのスタイルを克服する必要があります。考えられる解決策は次のとおりです:

• max-width: 100% を追加: この回避策は、入力フィールドを通常の CSS ボックス モデルに強制的に準拠させます。幅にはパディングとパディングが含まれます。 borders.
• box-sizing プロパティの使用: CSS3 では、 box-sizing プロパティ。要素の幅の計算方法を指定できます。 box-sizing の設定: border-box には、要素の幅にパディングとボーダーの両方が含まれます。

クロスブラウザーのサポート

ボックスは次のことに注意することが重要です。 -sizing プロパティはすべてのブラウザでサポートされているわけではないため、追加のブラウザ固有のプレフィックス (例: -moz-box-sizing Firefox) は、ブラウザ間の互換性のために必要な場合があります。

以上が入力要素で「display: block」が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。