Question

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

我特别想要做的是在某些地方插入换行符。我知道display：block，但它在我现在试图处理的情况下并没有真正起作用 - 一个带有＆lt; input＆gt;的表单。领域。像这样：

<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变得更容易了。

Answer 4

以下内容将为您提供换行符。它也会在前面放置额外的空间......你必须通过删除标签来搞乱你的源代码缩进。

form { white-space: pre }

Answer 5

一种选择是在XML中指定一个XSLT模板（某些）浏览器将处理该模板，允许您包含不应影响Web服务使用者的标记，CSS，颜色等的表示。

一旦进入XHTML，你可以简单地用CSS添加一些填充元素，例如

表格input.a {margin-bottom：1em}

Answer 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

form label { display: block; }

Answer 7

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

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

Answer 8

秘诀就是将你的整个东西，标签和小部件包围在一个跨越类别并且清晰的范围内：

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

Answer 9

我同意John Millikin的观点。您可以使用定义的CSS类在每行中添加<span>标记或其他内容，然后使它们显示：必要时阻止。我能想到的唯一另一种方法是使<input>成为内联块并使它们发出“非常大”的填充权限，这将使内联内容包裹起来。

即便如此，最好的办法是将数据逻辑分组到<span>标签（或类似）中，以表明该数据属于一起（然后让CSS进行定位）。

Answer 10

CSS clear元素可能就是你在寻找get linebreaks。一些事情：

#login表单输入{ 明确：两者; }

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

Reference

Answer 11

javascript选项完全复杂化了。像Jon Galloway或daniels0xff建议的那样。

Answer 12

使用javascript。如果您正在使用jQuery库，请尝试以下方法：

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

或者你需要什么。

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

12 个答案: