相关疑难解决方法(0)

这是我一直在努力解决的问题.标记名称/值对的正确方法是什么？

我喜欢<dl>元素,但它提出了一个问题:没有办法将一对与另一对分开 - 它们没有唯一的容器.在视觉上,代码缺乏定义.但从语义上讲,我认为这是正确的标记.

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

在上面的代码中,很难在视觉上和代码中正确地偏移对.例如,如果我想,但每对的边界,这将是一个问题.

我们可能会指向表格.可以说,名称 - 值对是表格数据.这似乎对我不正确,但我看到了这个论点.但是,除了位置或添加类名外,HTML不会将名称与值区分开来.

<table>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
</table>

从视觉角度来看,这在代码和CSS中都更有意义.设计上述边界是微不足道的.然而,如上所述,语义最多是模糊的.

想法,评论,问题？

编辑/更新 也许这是我应该在结构方面明确提到的,但是定义列表也存在不对语义进行分组的问题.a dd和a 之间的排序和隐含边界dt很容易理解,但它们对我来说仍然感觉有些偏差.

我想使用一个简单的定义列表:

<dl>
  <dt>name:</dt>
  <dd>Tomas</dd>

  <dt>address:</dt>
  <dd>this is a very long wrapping address</dd>

  <dt>age:<dt>
  <dd>29</dd>
<dl>

渲染类似于:

name: Tomas
address: this is a very long
wrapping address
age: 29

定义列表在语义上似乎是最好的选择.

使用新的run-in显示样式将起到作用:

<style> dt { display: run-in; } </style>

但目前尚未得到广泛支持.如何设置我的定义列表以获得更好的跨浏览器支持(即没有必要),而不更改html(目前我使用显示内联并添加丑陋的br)？

编辑澄清:

dt { clear: left; }
dd { float: left; }

将无法工作,因为它将呈现为:

name: Tomas
address: this is a very long
         wrapping address
age: 29

设计指定这些多行字段应包裹到行的起始处以保留空间.