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

Question

我有一个提交按钮，宽度为 30px，位于文本输入字段的右侧。

文本输入字段应动态填充所有可用的 space。

完成此操作的样式是什么？

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

Answer 1

* {
  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>

Answer 2

之所以设置框大小是因为浏览器默认情况下提交按钮上有边框和填充，所以它添加到我的 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;
}

Answer 3

试试这个-

*{
  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>

Answer 4

您可以选择 flexbox if you have the browser support:

.wrapper {
  display: flex;
}

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

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

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

Align text input and submit input horizontally, text input filling up all empty space

html

css

input-field