如何使用CSS在HTML文档中插入换行符
我正在写一个Web服务，我想将数据作为XHTML返回。因为它是数据，而不是标记，所以我想使其保持非常整洁，没有多余的<div>或者<span>`s。但是，为了方便开发人员，我还想使返回的数据在浏览器中合理地可读。为此，我正在考虑一种使用CSS的好方法。
我特别想做的事情是在某些地方插入换行符。我知道display：块，但是在我现在要处理带有<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" }
但这似乎无济于事。
解决方案
回答
一种选择是在XML中指定XSLT模板，(某些)浏览器将处理该XSLT模板，从而允许我们包含不影响Web服务使用者的带有标记，CSS，颜色等的演示。
在XHTML中，我们只需在CSS元素周围添加一些填充，例如
表格input.a {margin-bottom：1em}
回答
使用javascript。如果我们使用的是jQuery库，请尝试如下操作：
$("input.a").after("<br/>")
或者我们需要的任何东西。
回答
我同意约翰·米利金(John Millikin)的观点。我们可以在定义了CSS类的每行周围添加<span>标签或者其他内容，然后根据需要将其显示为display：block。我可以想到的唯一另一种方法是使<input>成为一个内联块，并使它们发出"非常大"的padding-right，这将使内联内容变小。
即便如此，最好的选择还是将数据按逻辑分组在<span>标签(或者类似标签)中，以表明该数据属于同一类(然后由CSS进行定位)。
回答
以下内容将为我们提供换行符。不过，这也会在前面增加多余的空间...我们必须通过删除制表符来弄乱源代码的缩进。
form { white-space: pre }
回答
最好将所有元素包装在label元素中，然后将css应用于标签。 ：before和：after伪类不能以一致的方式完全支持。
标签具有很多优点，包括增加的可访问性(在多个级别上)等等。
<label>
Thingy one: <input type="text" name="one">;
</label>
然后在标签元素上使用CSS ...
label {display:block;clear:both;}
回答
看起来我们想在列表中显示一堆表单项，对吗？嗯...如果只有那些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变得容易得多。
回答
表单控件是由浏览器专门处理的，因此很多事情不一定能正常工作。其中之一就是生成的内容对于表单控件无效。取而代之的是，将标签包裹在<label>中，并使用label：before {content：'\ a';空白：pre; }。我们也可以通过浮动所有内容并在<label>元素中添加clear：left来实现。
回答
CSS clear元素可能是我们正在寻找的获取换行符。
沿途：
#login form input {
clear: both;
}
将确保没有其他浮动元素留在输入字段的两侧。
参考
回答
<form> <label>Thingy 1: <input class="a" type="text" name="one" /></label> <label>Thingy 2: <input class="a" type="text" name="two" /></label> <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label> <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label> </form>
和以下CSS
form label { display: block; }
回答
秘诀是将整个小东西，标签和小部件包围在一个范围内，该范围内的类负责阻止并清除：
<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>
回答
javascript选项使事情变得更加复杂。按照Jon Galloway或者daniels0xff的建议进行操作。
