html - CSS - 动态长度文本输入字段和一行中的提交按钮

Question

我有：

<div>
    <input id="input" type="text" />
    <button id="submit">submit</button>
</div>

这给了我这个

如果我通过用鼠标光标拖动主面板来扩展主面板，则新空间的宽度为空：

我希望<input type="text" />填充整个水平新空间，但提交按钮保持在同一行。

我厌倦了使用<input style="width:100%" type="text"/>，但它填满了整行，提交按钮出现在下一行：

我还尝试了该线程中提到的表格： Liquid textfield width

结果是它“有点”工作，提交按钮与输入文本重叠，右侧的某个空间始终保持空白：

有人可以帮我提供一个代码想法来填充除提交按钮的（静态）大小之外的整个空间。

谢谢！

Answer 1

您链接到的“表格”方法将起作用，但您在输入元素上缺少一个关键属性：box-sizing。

http://cssdeck.com/labs/sbffl3l2

<div class="foo">
  <div class="bar"><input type="text"></div>
  <div class="bar"><input type="submit"></div>
</div>

.foo {
  display: table;
  width: 100%;
}

.bar {
  display: table-cell;
}

.bar:first-child, input[type="text"] {
  width: 100%;
}

input {
  box-sizing: border-box; /* this is the key */
}

可能需要前缀： http ://caniuse.com/#feat=css3-boxsizing

Answer 2

我相信你可以做到这一点：

<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />

但是不建议使用内联样式。

编辑：确保您还为按钮定义了固定宽度

Answer 3

为什么不给输入 70% 的宽度和给按钮 20% 的宽度？