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

Question

我正在编写一个Web服务,我希望将数据作为XHTML返回.因为它是数据,而不是标记,我想保持它非常干净 - 没有额外的<div>s或<span>s.但是,为了方便开发人员,我还希望在浏览器中使返回的数据合理可读.要做到这一点,我认为一个好的方法是使用CSS.

我特别想要做的是在某些地方插入换行符.我知道display:block,但它在我正在尝试处理的情况下并不真正起作用 - 带有<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>
    Thingy one: <input type="text" name="one">;
</label>

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

label {display:block;clear:both;}

Answer 2

表单控件由浏览器专门处理,因此很多东西不一定能正常工作.其中一个是生成的内容 - 它不适用于表单控件.而是将标签包装<label>并使用label:before { content: '\a' ; white-space: pre; }.您也可以通过浮动所有内容并添加clear: left到<label>元素来实现.

Answer 3

看起来你有一堆你希望在列表中显示的表单项,对吧？嗯...如果只有那些HTML规范的人想过要包含标记来处理项目列表......

我建议你这样设置:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

然后CSS变得更容易了.