CSS で \"width: auto\" を使用して `` フィールドを使用可能なスペースに埋めるにはどうすればよいですか?

幅: の場合は自動フィールド

CSS 初心者は、「width:auto」プロパティを などの display:block 要素に適用するときに混乱に遭遇することがよくあります。

自動幅定義:

CSS 仕様では、「width:auto」の正確な定義が曖昧なままであり、余地が残されています。混乱のため。ただし、一般に、これは要素の幅がその内容に合わせて自動的に調整されることを意味します。

の期待される動作の達成フィールド:

を行うには他のブロックレベル要素と同様に、フィールドに利用可能なスペースを埋めるには、次の手順を実行できます。

1.デフォルト サイズを上書き:

のデフォルト サイズ属性。フィールドによって幅が生成されます。これをオーバーライドするには、「width:100%」を適用します。これにより、親要素の使用可能なスペース全体にわたる幅が設定されます。

2.ブラウザー固有の境界線の問題を削除します:

残念ながら、ブラウザーでは境界線の処理が若干異なるため、不一致が発生します。これに対処するには、追加の CSS を使用できます。

• ブラウザ固有の境界線処理に対抗するために負のマージンを適用します。
• 不一致をさらに防ぐために、差し込み境界線を使用します。

コード例:

次のコードは、使用可能なスペースを で埋める方法を示しています。ブラウザ固有の境界線の問題を克服しながらフィールドを表示します:

<div style="padding:30px;width:200px;background:red">
  <form action="" method="post" style="width:200px;background:blue;padding:3px">
    <input size="" style="width:100%;margin:-3px;border:2px inset #eee" />
    <br /><br />
    <input size="" style="width:100%" />
  </form>
</div>

このコードはすべてのブラウザで完璧ではない可能性があることに注意してください。ただし、これは望ましい動作にほぼ近いものを提供し、ブラウザ間の潜在的な不一致に対処します。

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