并排堆叠html元素

Question

我想将我的 4 个 HTML 元素并排放置，总宽度为 100%。

<input type="number" name="height" placeholder="weight">
<span>kg</span>
<input type="number" name="weight" placeholder="height">
<span>cm</span>

但是我在堆栈溢出中发现了很多不起作用的答案。我得到这样的东西......

Answer 1

Flexbox 允许轻松改变对齐方式（在两个轴上）、宽度、占用剩余宽度、换行或从不换行等

你需要一个父容器，它有display: flex。它是弹性容器。现在所有的孩子都是弹性项目。

CSS 技巧有一个强大的Cheatsheet for Flexbox。

这里有两个例子：

• input占用span未占用的空间（应该是label元素吧？）-Codepen
• 每个元素大约占宽度的 25%，减去每个输入与其标签之间所需的边距 - Codepen

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.container {
  display: flex;
  padding: 2rem 1rem;
  background-color: tomato;
}

.container input {
  flex-grow: 1;
}

.container span {
  margin: 0 4rem 0 0.5rem;
}

.container span:last-of-type {
  margin-right: 0;
}

<div class="container">
  <input type="number" name="height" placeholder="weight">
  <span>kg</span>
  <input type="number" name="weight" placeholder="height">
  <span>cm</span>
</div>

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.container {
  display: flex;
  padding: 2rem 1rem;
  background-color: beige;
}

.container input,
.container span {
  width: calc(25% - 0.5rem); /* half of the margin set below */
}

.container span {
  margin-left: 1rem;
}

<div class="container">
  <input type="number" name="height" placeholder="weight">
  <span>kg</span>
  <input type="number" name="weight" placeholder="height">
  <span>cm</span>
</div>

Answer 2

input 和 span 元素是“内联”元素。它们的宽度仅与它们的内容一样宽（或者，在input 的情况下，与您告诉它们一样宽）。您已经将它们并排布置，但您需要将它们视为“块”元素，以便能够设置 width 以便它们总共可以占用 100% 的可用元素页面宽度。

您需要研究 block 与 inline 元素和 CSS Box Model 以开始了解布局的工作原理默认在网页中。

这是一个导致input 字段拉伸以填充空白空间的示例：

input {
  display:inline-block;     /* Allow the inline element to be sized as a block element */
  width:calc(50% - 2.5em);  /* Each will be 50% of the width of the parent - roughly 2.5 characters */
}

<input type="number" name="height" placeholder="weight">
<span>kg</span>
<input type="number" name="weight" placeholder="height">
<span>cm</span>

或者，如果您只希望宽度正常，但希望所有 4 个元素都在可用宽度内居中，您需要告诉父元素如何水平对齐其子元素，您可以使用 text-align：

.center {
  text-align:center;
}

<div class="center">
  <input type="number" name="height" placeholder="weight">
  <span>kg</span>
  <input type="number" name="weight" placeholder="height">
  <span>cm</span>
</div>