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

我正在编写一个web服务，我想以XHTML的形式返回数据。因为它是数据，而不是标记，所以我希望保持它非常干净-没有额外的

s或

s。但是，为了方便开发人员，我还希望使返回的数据在浏览器中具有合理的可读性。要做到这一点，我想一个很好的方法就是使用CSS

我特别想做的是在某些位置插入换行符。我知道

display:block

，但在我现在试图处理的情况下，它实际上不起作用-一个带有

字段的

表单。大概是这样的：

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

但这似乎没什么作用
 一个选项是在XML中指定（某些）浏览器将处理的XSLT模板，允许您包含不应影响web服务使用者的标记、CSS、颜色等表示

一旦进入XHTML，您可以简单地使用CSS在元素周围添加一些填充，例如

表单输入。{margin bottom:1em}
使用javascript。如果您正在使用jQuery库，请尝试以下操作：

$("input.a").after("<br/>")

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

$（“input.a”）。在（
）之后

或者你需要的任何东西。
我同意约翰·米利金的观点。您可以在定义了CSS类的每行周围添加
标记或其他内容，然后根据需要使它们显示：block。我唯一能想到的另一种方法是使
成为一个内联块，并使它们发出“非常大”的右填充，这将使内联内容得到压缩

即便如此，您最好的选择是在
标记（或类似标记）中对数据进行逻辑分组，以表明该数据属于一起（然后让CSS进行定位）。
以下内容将为您提供换行符。它也会在前面留出额外的空间。。。你必须通过移除标签来搞乱你的源缩进

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

标签标签有很多优点，包括增加了可访问性（在多个级别上）等等

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

看起来你有很多表单项要显示在列表中，对吗？隐马尔可夫模型。。。如果那些HTML规范的人想包括标记来处理项目列表的话

我建议您这样设置：

$("input.a").after("<br/>")

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



事情1：
事情1：


然后CSS就变得容易多了。
浏览器专门处理表单控件，所以很多事情不一定能正常工作。其中之一就是生成的内容——它不适用于表单控件。相反，将标签包装在
中，并使用
label:before{content:'\a'；空格：pre；}
。您还可以通过浮动所有内容并向
元素添加
clear:left
。
CSS clear元素可能就是您要查找的get换行符。
一些事情：

#登录表单输入{
明确：两者皆有；
}

将确保没有其他浮动元素留在输入字段的任一侧

秘密在于围绕你的整个东西，标签和小部件，在一个范围内，谁的类进行阻止和清除：

CSS


.lb{
显示：块；
明确：两者皆有；
}

HTML


事情1：
事情2：
事情3：
事情4：

标签，输入{float:left；}
标签{清除：左；}
事情1：
事情2：
javascript选项让事情变得非常复杂。按照Jon Galloway或daniels0xff的建议去做。
永远不要依赖javascript来做html/css可以轻松做到的事情，因为没有优雅的降级。如果代码是由其他框架或库生成的，则必须始终依赖js。否则，我们可以将任何html标记放在任何我们想要的地方：）不要忘记标签“for”属性，如果省略它们，那么首先使用标签是没有意义的，因为它与输入元素没有任何关系。接下来，您还可以将输入（或选择等）元素嵌套在标签中，并安全地省略“for”属性。讽刺等等。。。我不喜欢。正确的概念，但是“label”元素在语义上更正确。另外，和之间的全部区别是span是内联元素，div是块元素。如果你打算这样做，就使用div。我本来希望避免额外的包装元素，因为这个页面的主要消费者是软件，而不是人类。但这似乎是必要的。软件最好有一致的启动和停止指示器。（在输入元素周围包装标签时，不需要for=“one”）放下
for=“one”
和
id=“one”
，这是完全不必要的，而且会造成阻碍，因为它已经定义了一个
名称
。因为每个人都可以自由选择他们应用的解决方案。有时，另一种解决方案不适用，或者由于某种原因而不被客户或项目经理接受。这不是一个真正的答案，而是一条评论。当我在一年前写这篇文章时，评论并不存在。当有大词
空白处：行前
或无
空白处：预包装
对我有效时，不确定交叉浏览体验tho:）为什么\a是换行符（我知道它可以工作，但找不到任何关于它的文档。）@SamGoody这篇W3C文档中提到了它，尽管他们没有告诉他们为什么选择了\a而不是\N或\R…一个后跟十六进制数的反斜杠被解释为字符引用
A
是Unicode中的第十个字符，这是换行符。@AlexisWilke要补充Jim解释的内容：十六进制中的A=10（如0xA），Unicode的char 10是换行符。他们没有明确地选择
\a
而不是
\n
<style type="text/css">
  .lb {
    display:block;
    clear:both;
  }
</style>

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

<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>