定义列表与缺少定义的对齐

Question

我经常有表单有可选字段的应用程序。当这些记录显示在“显示”视图中时，定义会“折叠”在一起，并且不会与其各自的标签对齐。例如，如果我有3个字段，它们应该如下所示：

Phone:  312-555-1212
FAX:
Mobile: 312-555-1234

他们最终看起来像这样：

Phone:  312-555-1212
FAX:    312-555-1234
Mobile: 

我认为在每个结束“dd”标签之前抛出一个不间断的空间（％nbsp），但这似乎不是很干。

使用CSS有更好的方法吗？

这是我的Rails / HTML代码，因为它代表了非破坏空格。它有效，但是，我试图看看是否有更好的方法。

<dt>FAX:</dt>
<dd><%= number_to_phone(@user.fax, :area_code => true) %> &nbsp;</dd>

<dt>Pager:</dt>
<dd><%= number_to_phone(@user.pager, :area_code => true) %> &nbsp;</dd>

<dt>Mobile:</dt>
<dd><%= number_to_phone(@user.mobile, :area_code => true) %> &nbsp;</dd>

因此，通过在关闭“dd”标记之前放置非中断空格，我试图让系统认为某个字段中的内容没有任何内容并将下一个项目放在下一行而不是将它向上移动，因此它不再与它的标签对齐。

Answer 1

我认为你错过了定义列表。你通常会渲染（蜂蜜的dd是空的）：

所以你必须在你的CSS中使用一些定位来对＃34;定义＆＃34;
进行定位 使用表格来显示表格，使用标签来显示标签，使用css来格式化它！