css - 如何使搜索字段响应

Question

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

---

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

http://dabblet.com/gist/5618200

---

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

http://dabblet.com/gist/5618209

但我真的希望“提交”按钮有一个固定的宽度。

---

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

Answer 1

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

演示

<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;
}

Answer 2

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

<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