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;
}

Answer 2

试试这个 -

＆＃13;

sum()

＆＃13;

*{
  box-sizing:border-box;
}

.wrapper:after{
  clear:both;
  content: "";
}

#submit{
  float:right;
  width:100px;
}

#text{
  float:left;
  width: calc(100% - 100px);
}

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果您拥有flexbox：

，则可以选择browser support

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: