html - 如何使用 CSS 在 HTML 文档中插入换行符

Question

我正在编写一个网络服务，我想以 XHTML 的形式返回数据。因为它是数据，而不是标记，所以我想保持它非常干净 - 没有额外的 <div> s 或 <span>秒。但是，为了方便开发人员，我还想使返回的数据在浏览器中具有合理的可读性。为此，我认为一个很好的方法是使用 CSS。

我特别想做的事情是在某些地方插入换行符。我知道 display: block ，但它在我现在尝试处理的情况下并没有真正起作用 - form与 <input>领域。像这样:

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

我希望它能够呈现，以便每个标签与相应的输入字段显示在同一行。我试过这个:

input.a:after { content: "\a" }

但这似乎没有做任何事情。

Answer 1

最好将所有元素包装在标签元素中，然后将 css 应用于标签。 :before 和 :after 伪类没有以一致的方式得到完全支持。

Label 标记有很多优势，包括增加可访问性(在多个级别上)等等。

<label>
    Thingy one: <input type="text" name="one">;
</label>

然后在标签元素上使用 CSS...

label {display:block;clear:both;}