html - 在第一行显示两个元素，在下一行显示第三个元素

Question

我试图在一行上放置两个元素，然后在下一行上放置第三个元素。我偶然发现this answer ，但答案不适用于 input type="text"。 输入位于其自己的行上，这导致每个元素都有自己的行。

为什么它不起作用，如何将前两个元素放在一行上，将第三个元素放在第二行上？

Working JSFiddle

Not Working JSFiddle

#wrapper {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#wrapper > * {
  flex: 1 0 50%;
}
#wrapper > *:last-child {
  flex: 0 1 100%;
}

<div id="wrapper" style="background-color: rgb(144, 248, 144);">
  <label id="first">First Text</label>
  <input type="text" id="second">
  <span id="third">Third Text</span>
</div>

Answer 1

input 会中断到下一行，因为它具有由用户代理样式表应用的 2px 边框。

要将输入保留在第一行，您可以指定:

input { border-width: 0; }

DEMO

或者

更改 CSS 框模型以使内边距和边框成为宽度声明的一部分:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

DEMO