html - 对齐文本输入并水平提交输入，文本输入填满所有空白区域

Question

我在文本输入字段的右侧有一个宽度为 30 像素的提交按钮。

文本输入字段应动态填满所有可用空间。

实现此目的的样式是什么？

<div class="wrapper">
  <input type="text">
  <input type="submit">
</div>

Answer 1

框大小是因为提交按钮在浏览器默认情况下有边框和填充，所以它添加到我的 30px 声明中。如果添加 padding-left padding-right 和 border-left 和 border-right 就可以删除它一起并从宽度中减去它。 calc() 是 IE9+，但现在应该不是问题了。对于这类事情非常有用。

* {
  box-sizing: border-box;
}

.wrapper {
  width: 500px
}

input[type="text"] {
  width: calc(100% - 30px)
}

input[type="submit"] {
  width: 30px;
  float: right;
}