如何使HTML元素从同一行开始,但以换行符结束？

Question

我想<br>在每次input控制后都有一个换行符().我如何在CSS中做到这一点？

我必须补充一点:我希望输入控件在与标签或其前面的任何内容相同的行上开始,但在其末尾有一个换行符,以便后面的任何内容都在一个单独的行上开始.

我知道这与Flex盒子模型有关,但我还不太了解它.

label {
  font-weight: bold;
}

input {
  display: / * what goes here? */
}

<label for="theButton">Button</label>
<input name="theButton" type="button" value="Click me">
<label for="theTextBox">Button</label>
<input name="theTextBox" type="text">

Answer 1

在标签上使用伪元素来强制换行

label::before {
  content: "\A"; /* U+000A is the newline sequence */
  display: block;
}

Codepen演示

这会将标签放在一个新行上,但它会将输入保持在前一个标签的同一行.您还可以通过height在伪元素上设置来控制行之间的空间