按2列中的字母順序獲取國家/地區列表

Question

我試圖在2列中獲取國家/地區列表。

我現在的CSS使列表顯示一個接一個，如下之後：

+-----------------------------------+ 
Global | Argentina  | Australia 
+-----------------------------------+ 
Austria | Czech Republic | Denmark 
+-----------------------------------+ 

但我想下面將要顯示我的國家在不改變HTML ul & li

+-------------------------+ 
Global | Czech Republic 
+-------------------------+ 
Argentina | Denmark 
+-------------------------+ 
Australia 

HTML：

<div class="CountryList"> 
    <ul> 
     <li><a href="/english">Global</a></li> 
     <!-- More li elements --> 
    </ul> 
</div> 

CSS：

.CountryList ul 
{ 
list-style:none; 
} 

.CountryList ul li { 
width: 25%; 
margin: .5em 2%; 
float:left; 
} 

是否有任何CSS的解決方案，以完成這件事？

Answer 1

如果你不願意改變DOM，比你將不得不使用column-count財產

Demo

.CountryList { 
    -moz-column-count: 10; 
    -webkit-column-count: 10; 
    column-count: 10; 
    height: 100px; 
    -moz-column-gap: 100px; 
    -webkit-column-gap: 100px; 
    column-gap: 100px; 
} 

---

至於支持的話，你可以參考它here，所以如果你願意留下古老的瀏覽器比其罰款，否則考慮改變DOM，否則使用JavaScript或jQuery來實現。