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