用输入和按钮均匀填充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％，但浮在中间，而按钮位于其下方。如何将它们并排排列以填充div？

Answer 1

默认情况下，这些元素是内联的，因此它们之间的空白被保留，这使得它们的整体宽度为20％+ 80％+ [空格]，即＆gt; 100％。

你可以......

• 删除它们之间的空白区域
• 在父
上使用display: flex
• 浮动输入。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;