css - 如何使搜索字段响应

Question

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

---

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

http://dabblet.com/gist/5618200

---

我知道我可以让它与百分比一起工作:

http://dabblet.com/gist/5618209

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

---

我该怎么做才能使表单的行为与第一个示例中的 div 模型完全一样？

Answer 1

没有很好地回答您的问题，但您是否希望文本框为 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;
}