用CSS映射图例

你想用什么就用什么。对于这个非常罕见的例子,没有最佳实践。

描述“彩色盒子”适合 div 我想是最好的。 span 通常是指一些内联的东西,但也可以工作,比如说,每行有一个。你必须做到 inline-block ,但并非所有浏览器都支持,或者 block 但A div 默认情况下是阻塞的,所以不需要麻烦了。用一个 div 但是你可能需要 float 我不太确定。两个都要设置 width .

总而言之,没有比这更好的了,但是 div 在语义上更正确,因为 跨度 通常应该包含一些它“跨越”的内容。

我个人会使用一个定义列表:

dt {
width: 40px;
height: 40px;
display: inline-block;
overflow: hidden;
border: 1px solid #000;
}
.aqua {background-color: aqua; color: aqua; }
.orange {background-color: #f90; color: #f90; }
.black {background-color: #000; color: #000; }

dd {
display: inline-block;
width: 15em;
margin: 0 0 0 1em;
}


<dl>
<dt class="aqua">Aqua</dt>
<dd>T. bicolor range</dd>
<dt class="black">Black</dt>
<dd>T. thalassina range</dd>
<dt class="orange">Orange</dt>
<dd>T. euchrysea range</dd>
</dl>

我不确定它的语义是否比 @Tor Valamo 的答案,但我觉得这更有意义。