在第一行显示两个项目，在下一行显示第三个项目

Question

我试图在一行上有两个项目，然后在下一行有第三个项目。我偶然发现了this answer，但答案对input type="text"没有用。 input在它自己的行上，这导致每个元素都有自己的行。

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

Working JSFiddle

Not Working JSFiddle

＆＃13;

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

要将input保留在您可以指定的第一行：

input { border-width: 0; }

DEMO

OR

更改CSS框模型以使填充和边框成为宽度声明的一部分：

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

DEMO

Answer 2

我认为问题是input元素上的默认边框和填充，因此您可以使用box-sizing: border-box修复此问题

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;