Why Don\'t Input Fields Fill Available Space with `width: auto`?

Width:auto for Input Fields

Problem:

Width:auto for display:block elements is intended to fill available space. However, for input fields, this behavior seems inconsistent.

Questions:

1. What exactly does width:auto mean in CSS?
2. Is there a way to make input fields fill available space like other block-level elements?

Answer:

1. Meaning of width:auto:

An input's width is determined by its size attribute's default value. Width:auto sets the width to this default value.

2. Achieving expected behavior:

To make input fields fill available space, use width:100% as follows:

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

Note: This method may not work perfectly in all browsers due to differences in border application.

The above is the detailed content of Why Don\'t Input Fields Fill Available Space with `width: auto`?. For more information, please follow other related articles on the PHP Chinese website!