list - 规范列表的 HTML5 标记

Question

我有点难以理解以下信息的正确标记是什么

这将是 Wine 的规范 list :

• 土壤:土壤是石灰石和粘土的混合物......
• 呼吁:圣。艾美隆
• 葡萄园面积:7.3 公顷
• 葡萄品种:
  • 美乐:50%
  • 品丽珠:50%
• 陈酿:在新橡木桶中陈酿24个月
• 顶级年份:
  • 1929
  • ...
  • 2009
• 地窖值(value)图表重新调整:<img src="..."/>

所以首先我想:如果每一项都是 section，这看起来会很不错在规范范围内 section但后来看起来它不是一个部分，因为它基本上由 key:value 组成对。

所以我更改了定义列表 <dl>其中会有一些定义术语和一些具有多个定义的项目。它在标记中看起来不错，但如果您需要一个 block/flow 元素用于每个定义并将它们并排 float ，则无法正确设置样式。

像这样:

然后我想到我也可以使用无序列表，但我不确定这是否是一个好的标记，因为它实际上必须为每个列表项和它们创建一个标题将其值插入后续段落(对我来说似乎太多了)

所以也许是一张 table ？...好吧，在有这么多可用选项之后我有点困惑，那个让我感觉更舒服但仍然是次要的选项- section这是一个替代方案，但我不确定这是否是一个好的标记，因为我对部分的印象是，在某些情况下，它们将包含更多内容，而不仅仅是一行。

如果有人可以在这里提供有关如何使其在干净的标记上工作但同时考虑可访问性的帮助，那就太好了:)

提前致谢

Answer 1

好的，现在我明白你的问题了。我不知道这是否能满足您的需求，但我已经能够实现这个结果(适用于 FF/Chrome/IE8):

我的方法存在的问题是:

1. 你需要手动设置dl的高度
2. 水平规则不灵活并且附加到 dts(但是，您可以通过适当使用边距和填充来解决这个问题；
3. 如果您希望每一行的高度不同，则需要将 css 类分配给每一行中的至少一个 dt 标记(请参阅文章底部)。

如您所见，我的标记非常简单。然而，CSS 并没有那么多。此外，这种方法是极简风格，不是很灵活(请注意，我没有使用任何边距/填充来使其看起来更好):

dl.winelist {
background-color: #fdd;
width: 600px;
height: 452px; /* 3 * 150px boxes + 2 * 1px border */
border: 1px solid #000;
}

dl.winelist dt {
width: 200px; /* definition for normal boxes */
height: 150px;
float: left;
font-weight: bold;
background-color: #070;
margin: 0;
border-top: 1px solid #000;
}

dl.winelist dt:first-child {
border-top: 0 /* only show those lines <i>between</i> the boxes */
}

dl.winelist dd {
font-style: italic;
background-color: #770;
margin: 30px 0 0; /* dd gets positioned 30px below the origin of dt */
width: 200px;
float: left;
margin-left: -200px; /* could combine that with margin statement above */
}

dl.winelist dt.triple {
width: 600px;
}

dl.winelist dt.triple + dd {
width: 600px;
margin-left: -600px;
}

dl.winelist ul {
list-style: none; /* you can freely style the ul, it won't actually break anything */
margin: 0;
padding: 0;
}

如果你不想对土壤使用三重类，你甚至可以使用:first-child而不是 .triple

如果您可以为每个 <dt> 分配一个类元素(例如称谓、区域，您可以为每一行设置不同的高度值(从 dl.winelist dt 中移除高度，但是:

dt.appelation, dt.aging {
clear: left;
}

dt.soil {
height: 150px;
}

dt.appelation {
height: 120px;
}

dt.aging {
height: 240px;
}

一种完全不同的方法是使用 position: relative在 dl 上，并定位成员 absolute ly，取决于他们各自的类(class)。