Chrome で「display: block」と「width: auto」のボタンをストレッチしてコンテナをいっぱいにしないのはなぜですか?

「display: block」と「width: auto」がコンテナを埋めるようにボタンを引き伸ばさない理由

「display: block」を適用する場合: block" と "width: auto" をボタンに指定すると、他のブロック要素と同様にコンテナーを引き伸ばして埋めることが期待されるかもしれません。ただし、この動作は Chrome の最近のバージョンでは発生しません。

動作について

この動作の理由は、ボタンが「置換された要素」として分類されていることにあります。 」 input、select、button、img、object、textarea 要素などの置換された要素には、特定のデフォルトの表示プロパティがあります。

CSS 仕様によれば、置換された要素は、画像などの外部リソースによって決定される固有のサイズを持つことができます。またはブラウザのコントロール。たとえば、画像要素の幅が「自動」に設定されている場合、リンクされた画像ファイルの実際の幅が使用されます。

さらに、置換された要素には、要素自体によって課せられる視覚的な書式設定要件がある場合があります。フォーム要素のユーザー インターフェイス コントロールの外観として、CSS の制御の範囲を超えています。

これがボタンに与える影響

ただし、ボタンは純粋に置き換えられた要素とは見なされません。 W3C によって定義されているため、このコンテキストでは同様に動作します。デフォルトでは、コンテンツに基づいた固有のサイズがあり、「display: block」はこの動作をオーバーライドしません。

ボタンをストレッチするためのソリューション

コンテナを埋めるためにボタンをストレッチする場合は、別のアプローチを使用できます。

<code class="css">button {
  display: flex;
  width: 100%;
}</code>

フレックスボックスを使用すると、要素のサイズをより詳細に制御でき、要素を拡張して利用可能なスペースを満たすことができます。

以上がChrome で「display: block」と「width: auto」のボタンをストレッチしてコンテナをいっぱいにしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。