对齐文本输入并水平提交输入，文本输入填满所有空白空间答案

【问题标题】：Align text input and submit input horizontally, text input filling up all empty space对齐文本输入并水平提交输入，文本输入填满所有空白空间
【发布时间】：2015-10-14 01:40:38
【问题描述】：

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

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

实现这一点的样式是什么？

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

【问题讨论】：

您希望文本输入字段的大小随着文本输入而改变，还是只占用提交字段后剩余的空间？
是的，第二种情况——“占用提交字段后剩余的空间”。

标签： html css input-field

【解决方案1】：

box-sizing 存在是因为提交按钮在浏览器默认情况下有一个边框和填充，所以它添加到我的 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;
}

【讨论】：

【解决方案2】：

试试这个-

*{
  box-sizing:border-box;
}

.wrapper:after{
  clear:both;
  content: "";
}

#submit{
  float:right;
  width:100px;
}

#text{
  float:left;
  width: calc(100% - 100px);
}

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

【讨论】：

【解决方案3】：

如果你有browser support，你可以选择flexbox：

.wrapper {
  display: flex;
}

input[type="text"] {
  flex: 1;
}

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

【讨论】：

【解决方案4】：

* {
  box-sizing: border-box;
}
.input-wrapper {
  padding-right: 30px;
}
#text {
  width: 100%;
  float: left;
}
#submit {
  width: 30px;
  float: right;
}

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

【讨论】：