并排堆叠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。它是flex容器。现在所有的孩子都是弹性物品。

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

以下是两个例子：

• 输入占用未被span占用的空间（应该是标签元素不是吗？） - 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个元素都在可用宽度内居中，则需要告诉父元素如何水平对齐其子元素，您可以使用{{1} }：

text-align

.center {
  text-align:center;
}