css - 响应式搜索表单

Question

我有一个搜索表单如下：

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

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

提交输入必须具有固定宽度。所以搜索输入必须填满剩余的空间。

我希望表格能够响应...

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

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

谢谢你，米格尔

Answer 1

这很容易完成。

所有你需要的是：

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

结果 - 你应该得到这样的东西。

我还添加了box-sizing属性，因此表单将根据需要在视觉上占据 40%，并通过将输入放在一行中来删除输入之间的实际空白。如果你有一个小的差距。也有办法对抗它。