如何使用CSS在HTML文档中插入换行符
我正在编写一个Web服务，我想要返回数据作为XHTML。 因为它是数据，而不是标记，我想保持它非常干净 – 没有额外的<div> s或<span> s。 不过，为了方便开发人员，我还希望在浏览器中使返回的数据合理可读。 要做到这一点，我想一个很好的方法去使用CSS。
我特别想做的事情是在某些地方插入换行符。 我知道显示：块，但它现在不是真的在我现在正在处理的情况下工作 – 与<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字段相同的行。 我试过这个：
input.a:after { content: "\a" }
但是这似乎没有做任何事情。
最好将所有元素都包装在标签元素中，然后将css应用于标签。 ：之前和之后：伪类不是完全支持一致的方式。
标签标签有很多优点，包括增加的可访问性（在多个层面上）等等。
<label> Thingy one: <input type="text" name="one">; </label>
然后在您的标签元素上使用CSS …
label {display:block;clear:both;}
表单控件是由浏览器专门处理的，所以很多东西不一定按照他们的意思工作。 其中之一就是生成的内容 – 它不适用于表单控件。 相反，将标签包装在<label>并使用label:before { content: '\a' ; white-space: pre; } label:before { content: '\a' ; white-space: pre; } label:before { content: '\a' ; white-space: pre; } 。 您也可以通过将所有内容全部移除并将<label> clear: left添加到<label>元素。
它看起来像你有一堆表单项目，你想在列表中显示，对不对？ 嗯…如果只有那些HTML规格的人曾经认为包括标记处理项目列表…
我build议你像这样设置它：
<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变得更容易。
以下将给你换行符。 它也会把额外的空间放在前面，虽然…你必须通过删除标签来弄乱你的源代码缩进。
form { white-space: pre }
<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"> label, input { float: left; } label { clear:left; } </style> <form> <label>thing 1:</label><input /> <label>thing 2:</label><input /> </form>
一种select是在你的XML中指定一个XSLT模板，一些浏览器将处理这些模板，使你能够包含不应该影响Web服务消费者的标记，CSS，颜色等。
一旦进入XHTML，你可以简单地在CSS元素周围添加一些填充，例如
表单input.a {margin-bottom：1em}
秘密就是围绕你的整个东西，标签和小工具，在一个class级做的块和明确的范围：
<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>
我同意约翰米利肯。 你可以在每一行的<span>标签中添加一个定义好的CSS类，然后根据需要显示：block。 我唯一能想到的方法是使<input>成为一个内嵌块，并使它们发出“非常大”的填充权，这将使内联内容包装。
即使如此，最好的办法是将数据按照<span>标签（或类似标签）进行逻辑分组，以表明数据属于一个整体（然后让CSS进行定位）。
CSS清除元素可能是你正在寻找获得换行符。 一些东西：
#login form input {clear：both; }
将确保没有其他浮动元素留在你的input字段的任何一边。
参考
JavaScript的选项都是复杂的东西。 按Jon Galloway或daniels0xff的build议。
使用javascript。 如果您使用的是jQuery库，请尝试如下所示：
$("input.a").after("<br/>")
或者任何你需要的。
