如何使用CSS在HTML文档中插入换行符 [英] How to insert line breaks in HTML documents using CSS

问题描述

我在写一个web服务，我想返回数据为XHTML。因为它是数据，而不是标记，我想保持它很干净 - 没有额外的< div> s或< span> s。但是，为了方便开发人员，我还希望使返回的数据在浏览器中可以合理读取。为了做到这一点，我想一个好的方法去使用CSS。

I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <div>s or <span>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS.

我特别想做的是在某些地方插入换行符。我知道display：block，但它并不真正工作在我现在想处理的情况下 - 一个具有< input>字段的表单。像这样：

The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of display: block, but it doesn't really work in the situation I'm trying to handle now - a form with <input> fields. Something like this:

<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>

我想渲染，以使每个标签显示在相应的输入字段。我试过这个：

I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this:

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

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

But that didn't seem to do anything.

推荐答案

最好将所有元素包装在标签元素中，然后将css应用到标签。

It'd be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.

标签标签具有许多优点，包括增加了可访问性（在多个层次上）和更多。

Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.

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

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

then use CSS on your label elements...

label {display:block;clear:both;}

这篇关于如何使用CSS在HTML文档中插入换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！