按字母顺序获取2列中的国家/地区列表

Question

我正在尝试将国家/地区列表分为两列。

我当前的CSS使列表一个接一个地显示如下：

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

但我希望我的国家/地区显示如下，而不更改HTML ul＆amp; 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来实现它。