利用可能なスペースを `width: auto` で埋めるための `` 要素を取得するにはどうすればよいですか?

における width: auto の意味は何ですか?要素?

ブロック要素に使用可能なスペースを埋めるためのディレクティブとしての共通理解にもかかわらず、width: auto は に対して異なる動作をします。

幅: auto の定義

CSS 仕様では、 の width: auto の特定の動作は明示的に定義されていません。要素。ただし、これは通常、ブラウザが要素の固有プロパティに基づいて幅を計算する必要があることを意味します。

入力フィールドの望ましい動作を実現する

期待される塗りつぶしの動作を実現するには に使用可能なスペースフィールド:

• 幅の試行: 100%: これは、他のブロックレベル要素の動作と同様に、幅をコンテナ内の残りのスペースに設定します。

幅: 100% が失敗した場合:

入力領域のサイズを定義するデフォルトのサイズ属性が原因である可能性があります。これをオーバーライドするには、size 属性を削除するか、空の文字列 (例: size="") に設定します。

幅 100% の例:

<code class="html"><form style="width: 200px; background: khaki">
  <input style="width: 100%" />
</form></code>

マージンと枠線を使用した部分的な解決策:

より正確な解決策として、次のコードに示すように、入力フィールドに負のマージンと挿入枠線を追加します:

<code class="html"><div style="padding: 30px; width: 200px; background: red">
  <form style="width: 200px; background: blue; padding: 3px">
    <input style="width: 100%; margin: -3px; border: 2px inset #eee" />
  </form>
</div></code>

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