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的评论。

Answer 2

你可以随意使用。这个相当罕见的例子没有最佳实践。

我认为“彩色方块”的描述最适合div。 span通常意味着内联，但也可以正常工作，因为每行可以看到一个，可以这么说。你必须使它inline-block（所有浏览器都不支持）或block，但默认情况下div是块，所以没有麻烦。使用div然而你可能需要float它，我不太确定。两者都必须设置width。

总而言之，没有一个比另一个好，但div在语义上会更正确，因为span通常应该包含“跨越”的东西。

使用CSS映射图例

2 个答案: