html - 有序(枚举)dl 列表，可能带有 css

Question

在 ol 和 dl 之间获得交叉的“正确”标记是什么:

<dl>
<dt> one topic </dt> <dd> text </dd>
<dt> another topic </dt> <dd> text </dd>
</dl>

显示这个的合乎逻辑的方式(也许是因为我有 365 个，一年中的每一天)是

 1. one topic
           text
 2. another topic
           text

/我是

Answer 1

css 提供了一种使用 dl 执行此操作的简单方法

dl {
	counter-reset: term;
}

dt:before {
	counter-increment: term;
	content: counter(term) ". ";
}

<dl> 
	<dt>Red</dt>
	<dd>The color at the longer-wavelengths end of the spectrum of visible light next to orange, at the opposite end from violet.</dd>
	<dt>Yellow</dt>
	<dd>The color between green and orange on the spectrum of visible light. It is evoked by light with a predominant wavelength of roughly 570–590 nm.</dd>
	<dt>Blue</dt>
	<dd>The colour between violet and green on the optical spectrum of visible light. Human eyes perceive blue when observing light with a wavelength between 450 and 495 nanometres, which is between 4500 and 4950 ångströms.</dd>
	<dt>Etc.</dt>
    <dd>Many styling options are possible.</dd>
</dl>