如何使搜索字段响应答案

【问题标题】：How to make search field responsive如何使搜索字段响应
【发布时间】：2013-05-15 22:08:34
【问题描述】：

我正在尝试将搜索字段添加到响应式侧边栏，并希望该字段响应式缩放到侧边栏的宽度，同时将“提交”按钮保持在设定的宽度，与搜索在同一行字段。

我已经能够用 div 模拟效果，但是当将相同的样式应用于表单元素时，搜索字段将始终填满表单元素的整个宽度：

http://dabblet.com/gist/5618200

我知道我可以让它与百分比一起使用：

http://dabblet.com/gist/5618209

但我真的希望“提交”按钮设置宽度。

我可以做些什么来使表单的行为与我的第一个示例中的 div 模型完全一样？

【问题讨论】：

标签： css forms responsive-design

【解决方案1】：

这是一个功能齐全的解决方案。

<form>
  <div class="form-element textfield">
    <input type="text">
  </div>

  <div class="form-element submit-btn">
    <input type="submit" value="Search">
  </div>
</form>

还有样式：

.form-element {
  display: table-cell;
  box-sizing: border-box;
}

.textfield {
  width:100%
}

.textfield > input {
  width:100%
}

这是一个例子： http://codepen.io/capynet/pen/vJBnL

【讨论】：

【解决方案2】：

没有很好地回答您的问题，但您希望文本框是 width 100% 和这样的固定按钮吗？

Demo

<input type="submit" value="Search" />
<div>
   <input type="text" />
</div>

input[type=submit] {
    float: right;
}

input[type=text] {
    width: 100%;
}

div {
    overflow: hidden; 
    padding-right: .5em;
}

【讨论】：

嗯，我想我有点想多了。所以诀窍是在搜索栏周围添加一个溢出的 div。感谢您的快速回复！