與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的地圖傳說

回答

相關問題