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?开发者_JAVA技巧
Something like this: http://golondrinas.cornell.edu/Maps/Map%20legend.png
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.
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".
精彩评论