html - 在 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 来实现。