如何使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 demo

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

Answer 2

如果您不能/不会更改标记集display:block输入和float:left标签。

label {
  font-weight: bold;
  float: left;
  margin-right: 10px;
}

input {
  display: block;
}

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

顺便说一下，最好考虑调整HTML并使用更优雅的方式。