如何使输入字段填充固定宽度容器中的剩余空间？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-11-15 11:18:03

原创

393 人浏览过

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

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

问题：

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

答案：

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

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

示例代码：

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