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

结果是它有效＆＃34;一点点＆＃34;提交按钮与输入文本重叠，右侧的某个空格始终为空：

除了提交按钮的（静态）大小之外，有人可以帮助我填充整个空间的代码构思。

谢谢！

Answer 1

您链接到的“table”方法可以正常工作，但是您在输入元素上缺少一个重要属性：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％的宽度？