How to Make an Input Field Fill Remaining Space in a Fixed-Width Container?

Achieving Fluid Width for Input Elements within Fixed-Width Containers

Question:

How can an input field be styled to occupy the available remaining space within its fixed-width container, without text wrapping or the need to determine label size beforehand?

Answer:

To achieve this effect, consider the following:

1. Wrapper Span: Wrap the input field within a span element set to display: block.
2. Positional Order: Place the "button" (or other elements) before the input field.
3. Floating: Float the "button" (or other elements) to the right to allow the input field to fill the remaining space.

Example Code:

<form method="post">
  <button>Search</button>
  <span><input type="text" title="Search" /></span>
</form>

form {
  width: 500px;
  overflow: hidden;
  background-color: yellow;
}

input {
  width: 100%;
}

span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}

button {
  float: right;
}

The above is the detailed content of How to Make an Input Field Fill Remaining Space in a Fixed-Width Container?. For more information, please follow other related articles on the PHP Chinese website!