使用CSS映射图例

Question

How would you style a legend map with css only (no images)?

Do I use div element for little squares of color or a span element?

Something like this: http://golondrinas.cornell.edu/Maps/Map%20legend.png

Answer 1

I'd personally use a definition list:

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>

I'm not sure it's any more semantic than @Tor Valamo 's answer, but it feels like it makes more sense to me.

---

Edited to add link to a jsbin demo in response to comment by OP.

Answer 2

You can use whatever you want. There's no best practice for this rather rare example.

The description "a coloured box" fits a div best I think. span would usually mean something inline, but could work as well, seeing as there is one per line, so to speak. You would have to make it inline-block , which isn't supported in all browsers, or block , but a div is block by default, so no hassle with that. With a div however you would need to possibly float it, i'm not quite sure. With both you'd have to set the width .

So to summarize, there's none that is better than the other, but div would be more semantically correct, since span should usually contain something that it "spans".