html - 定义列表与缺失定义的对齐

Question

我经常有表单具有可选字段的应用程序。当这些记录显示在“显示” View 中时，定义“折叠”在一起并且不与它们各自的标签对齐。例如，如果我有 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

我认为您误用了定义列表。你通常呈现像(Honey 的 dd 是空的):

所以你必须在你的CSS中使用一些定位来对齐“定义”
使用 tables 来显示表格，使用 labels 来显示标签和 css 来格式化它!