html - 如何使 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 来控制行间距