與CSS的地圖傳說

Question

你會如何使用css（沒有圖像）對傳說地圖進行風格化？

我是否將div元素用於顏色的小平方或span元素？任何幫助，將不勝感激。

像這樣 http://golondrinas.cornell.edu/Maps/Map%20legend.png

Answer 1

你可以使用任何你想要的。這個比較罕見的例子沒有最佳實踐。

描述「一個彩色框」適合我認爲最好的div。 span通常意味着內聯，但也可以工作，因爲每行只有一個，可以這麼說。您必須將其設置爲inline-block，這在所有瀏覽器中都不受支持，或者block，但默認情況下div是阻止的，因此不需要麻煩。有了div但是你可能需要float它，我不太確定。兩者你都必須設置width。

所以總而言之，沒有比其他更好的，但div在語義上更準確，因爲span通常應該包含它「跨越」的內容。

Answer 2

我個人用一個定義列表：

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發表評論。