ホームページ > ウェブフロントエンド > CSSチュートリアル > `width: auto` が ` フィールドに対して期待どおりに機能しないのはなぜですか? 使用可能なスペースを埋めるにはどうすればよいですか?

`width: auto` が ` フィールドに対して期待どおりに機能しないのはなぜですか? 使用可能なスペースを埋めるにはどうすればよいですか?

Linda Hamilton
リリース: 2024-10-30 03:03:28
オリジナル
398 人が閲覧しました

Why doesn't `width: auto` work as expected for `` fields, and how can I make them fill available space?

width:auto の動作フィールド

質問:

ブロックレベル要素の width:auto により、要素が利用可能なスペースを埋めることができると期待されていたにもかかわらず、これは機能しないようです の方法要素。 width:auto の定義を明確にし、 に使用可能なスペースを埋めるという望ましい動作を実現するための解決策を提案します。

答え:

フィールドの幅。要素は、幅スタイル プロパティではなく、そのサイズ属性に基づいて計算されます。デフォルトのサイズ値によって、初期の自動幅が決まります。

利用可能なスペースを埋めるという期待どおりの動作を実現するには、width:auto の代わりに width:100% を設定してみてください。

例:

<code class="html"><form action="" method="post" style="width:200px;background:khaki">
  <input style="width:100%" />
</form></code>
ログイン後にコピー

追加メモ:

幅をさらに微調整するには、負のマージンと境界線を追加して、によって適用されるデフォルトのマージンと境界線を打ち消します。ブラウザ。これにより、境界線の適用方法が異なる Internet Explorer を除き、さまざまなブラウザ間で一貫性が確保されます。

以上が`width: auto` が ` フィールドに対して期待どおりに機能しないのはなぜですか? 使用可能なスペースを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート