Question

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

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

http://dabblet.com/gist/5618200

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

http://dabblet.com/gist/5618209

但我真的希望'submit'按钮有一个设定的宽度。

我可以做些什么来使表单在第一个示例中像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;
}

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

如何使搜索字段响应

2 个答案: