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