响应式搜索表单

Question

我有一个搜索表格如下：

<form method="get" action="#">
  <input type="search" />
  <input type="submit" value="Search"/>
</form>

我希望两个输入的组合能够填充100％...

提交输入必须具有固定宽度。因此搜索输入必须填充其余空间。

我希望表单能够快速响应......

我在这里创建了一个示例：http://codepen.io/mdmoura/pen/jiHko

我可以帮忙解决这个问题吗？

谢谢你， 米格尔

Answer 1

这很容易实现。

您只需要：

1. 使搜索输入占据width: 100%;
的父级宽度的100％
2. 将两个输入inline-block放在一起，将white-space: nowrap;属性添加到form元素，这样按钮就不会转到下一行。 （现在按钮会从表格中伸出到它的宽度距离。）
3. 将padding属性添加到等于按钮宽度的form元素

结果 - 你应该得到something like this。

我还添加了box-sizing属性，因此视觉上表单将根据需要占用40％，并通过将它们放在一行上来删除输入之间的实际空白区域。如果你有一个小差距。还有ways to fight it。