如何使輸入欄位填滿固定寬度容器中的剩餘空間？

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;
}

以上是如何使輸入欄位填滿固定寬度容器中的剩餘空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！