与CSS的地图传说

你会如何使用css（没有图像）对传说地图进行风格化？与CSS的地图传说

我是否将div元素用于颜色的小平方或span元素？任何帮助，将不胜感激。

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

来源

2010-09-02 sarsnake

你是说，一个真实的地图的传说？不是''元素？ – 2010-09-02 19:56:24

是的，这就是我的意思。一个真实的地图传说。 – sarsnake 2010-09-02 19:57:13

确实*这些答案中的任何一个对你有帮助吗？还是仍然存在我们可以提供帮助的问题？ – 2010-10-03 19:30:57

你可以使用任何你想要的。这个比较罕见的例子没有最佳实践。

描述“一个彩色框”适合我认为最好的div。 span通常意味着内联，但也可以工作，因为每行只有一个，可以这么说。您必须将其设置为inline-block，这在所有浏览器中都不受支持，或者block，但默认情况下div是阻止的，因此不需要麻烦。有了div但是你可能需要float它，我不太确定。两者你都必须设置width。

所以总而言之，没有比其他更好的，但div在语义上更准确，因为span通常应该包含它“跨越”的内容。

来源

2010-09-02 19:57:20

跨浏览器内联块：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ – 2010-09-02 20:50:10

我个人用一个定义列表：

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发表评论。

来源

2010-09-02 20:45:00

谢谢，但有什么办法可以确保dt与dd对齐（在同一行）？现在dd显示在它下面。 – sarsnake 2010-09-02 21:55:29

是的，请参阅编辑。 :) – 2010-09-02 23:28:00

噢，是的，忘了'dl' ......这是一些人过度使用，有些人根本不使用的东西之一。我是后者。：POR – 2010-09-03 06:39:32

与CSS的地图传说

回答

相关问题