40

我正在编写一个 Web 服务，我想将数据作为 XHTML 返回。因为它是数据，而不是标记，所以我想保持它非常干净——没有额外<div>的 s 或<span>s。但是，为了方便开发人员，我还想让返回的数据在浏览器中具有合理的可读性。为此，我在想一个很好的方法是使用 CSS。

我特别想做的是在某些地方插入换行符。我知道display: block，但在我现在尝试处理的情况下它并没有真正起作用 -form带有<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" }

但这似乎没有任何作用。

4

12 回答 12

54

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

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

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

然后在标签元素上使用 CSS...

label {display:block;clear:both;}
于 2008-09-15T19:26:49.803 回答
41

浏览器对表单控件进行了特殊处理，因此很多事情不一定能正常工作。其中之一是生成的内容——它不适用于表单控件。相反，将标签包裹起来<label>并使用label:before { content: '\a' ; white-space: pre; }. 您也可以通过浮动所有内容并添加clear: left到<label>元素来做到这一点。

于 2008-09-15T19:33:00.880 回答
12

看起来您有一堆想要在列表中显示的表单项，对吧？嗯...如果只有那些 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 变得容易多了。

于 2008-09-15T19:30:29.857 回答
4

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

form { white-space: pre }
于 2008-09-15T19:26:27.293 回答
2

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

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

表单 input.a { margin-bottom: 1em }

于 2008-09-15T19:16:28.330 回答
2 
<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; }
于 2008-09-15T19:58:29.883 回答
2 
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
于 2008-09-15T20:00:08.490 回答
1

秘诀是围绕你的整个事物、标签和小部件，在一个跨度中，其类会阻止和清除：

CSS

<style type="text/css">
  .lb {
    display:block;
    clear:both;
  }
</style>

HTML

<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>
于 2008-09-15T20:00:07.353 回答
0

我同意约翰·米利金的观点。您可以在<span>定义了 CSS 类的每一行周围添加标签或其他内容，然后在必要时将它们设置为 display:block。我能想到的唯一另一种方法是制作<input>一个内联块并让它们发出“非常大”的填充权，这将使内联内容包裹起来。

即便如此，您最好的选择是在<span>标签（或类似标签）中对数据进行逻辑分组，以指示该数据属于一起（然后让 CSS 进行定位）。

于 2008-09-15T19:25:55.640 回答
0

CSS clear 元素可能是您正在寻找的获取换行符。伴随着一些东西：

#登录表单输入{清除：两者；}

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

参考

于 2008-09-15T19:34:28.520 回答
0

javascript 选项使事情变得复杂。按照 Jon Galloway 或 daniels0xff 的建议去做。

于 2008-09-16T19:10:00.817 回答
-1

使用 JavaScript。如果您使用的是 jQuery 库，请尝试以下操作：

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

或者你需要的任何东西。

于 2008-09-15T19:23:48.233 回答