Получить список стран в алфавитном порядке в 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 для этого.