html - 用输入和按钮均匀填充一个 div

Question

我有一个内部有两个输入的 div。一个文本框和一个按钮。我想将 div 设置为一定宽度(比如 30em)，并让文本框填充它的 80%，按钮填充另外 20%。输入应该并排。 div 在页面中居中。

<div class="container">
  <input class="input" type="text" placeholder="Some text">
  <input class="button" type="submit">
</div>

到目前为止我有这个 scss

.container {
  margin-left: auto;
  margin-right: auto;
  width: 30em;
  .input {
    width: 80%;
  }
  .button {
    width: 20%;
  }
}

到目前为止，文本框占据了 80%，但 float 在中间，按钮位于其下方。如何将它们并排排列以填充 div？

Answer 1

这些元素默认是内联的，因此保留了它们之间的空白，这使得它们的总宽度为 20% + 80% + [一个空格]，即 > 100%。

你可以...

• 去掉它们之间的空白
• 在父级上使用display: flex
• float 输入。

* {margin:0;padding:0;box-sizing:border-box;}
.container {
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

.flex {
  display: flex;
}

.input {
  width: 80%;
}

.button {
  width: 20%;
}

.float {
  overflow: auto;
}

.float input {
  float: left;
}

<div class="container">
  <input class="input" type="text" placeholder="Some text"><input class="button" type="submit">
</div>

<div class="container flex">
  <input class="input" type="text" placeholder="Some text">
  <input class="button" type="submit">
</div>

<div class="container float">
  <input class="input" type="text" placeholder="Some text">
  <input class="button" type="submit">
</div>