如何使输入字段填充固定宽度容器中的剩余空间？

在固定宽度容器内实现输入元素的流体宽度

问题：

如何是否可以将输入字段的样式设置为占用其固定宽度容器内的可用剩余空间，而无需文本换行或需要预先确定标签大小？

答案：

要实现此效果，请考虑以下操作：

1. 包装跨度： 将输入字段包装在设置为显示的跨度元素内：块。
2. 位置顺序：将“按钮”（或其他元素）放置在输入字段之前。
3. 浮动：将“按钮”（或其他元素）向右浮动到允许输入字段填充剩余空间。

示例代码：

<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中文网其他相关文章！