使用CSS映射图例

Question

你如何用css设置一个传奇地图(没有图像)？

我是否将div元素用于小方块颜色或span元素？任何帮助,将不胜感激.

像这样的东西 http://golondrinas.cornell.edu/Maps/Map%20legend.png

Answer 1

我个人使用定义列表:

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的答案更具语义性,但感觉它对我来说更有意义.

编辑添加链接到jsbin演示以响应OP的评论.