Css 如何使搜索字段具有响应性

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

---

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

---

我知道我可以利用百分比来实现这一点：

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

---

---

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

没有很好地理解您的问题，但是您是否希望文本框的宽度为

宽度为100%

和这样一个固定的按钮



输入[类型=提交]{
浮动：对；
}
输入[类型=文本]{
宽度：100%；
}
div{
溢出：隐藏；
右侧填充：.5em；
}
这是一个功能齐全的解决方案

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

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

以下是一个例子：
嗯，我想我有点想过头了。因此，诀窍是在搜索栏周围添加一个溢出的div。谢谢你的快速回复！
<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%
}