输入后的断行没有html标记

Question

我试图显示一些输入及其相应的标签.它们都是内联元素,我有一个工作解决方案,最后添加一个br标签就像这样

<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />

我喜欢在没有多余HTML标记的情况下解决这个问题,即使用CSS.最简单的方法是什么？

我已经查看了与此类似的其他问题,但是按行而不是按列对齐.

Answer 1

您可以在输入周围包装标签并将其显示为块:

<style>
  label { display: block; }
</style>

<label>
  Hello: <input name="hello">
</label>
<label>
  StackOverflow: <input name="stackoverflow">
</label>

请注意,执行此操作时,您不需要使用该for="name"属性.

另一种方式(如果你不希望标签缠绕你的输入)是将标签浮动到左边:

<style>
  label { float: left; clear: left; }
</style>

不过,我一般喜欢多一点的标记,东西连接label并input成一个逻辑单元,称为字段:

<div class="field">
  <label for="hello">Hello</label>
  <input name="hello">
</div>
<div class="field">
  <label for="stackoverflow">Stackoverflow</label>
  <input name="stackoverflow">
</div>

因为每个字段都是a div,所以它会自动显示为块,但您也可以为各个字段控制它.