以2列的字母顺序获取国家列表 [英] Get the country list in alphabetic order in 2 columns

问题描述

我现在的CSS让列表依次显示如下：

  + ------------------------------- ---- + 
全局|阿根廷|澳大利亚
 + ----------------------------------- + 
奥地利|捷克共和国|丹麦
 + ----------------------------------- + 
  

但是我希望我的国家可以在不改变HTML ul & ; li

  + ----------- -------------- + 
 Global |捷克共和国
 + ------------------------- + 
阿根廷|丹麦
 + ------------------------- + 
澳大利亚
  

HTML：
$ b

 < ; div class =CountryList> 
< ul> 
< li>< a href =/ english>全球< / a>< / li> 
<！ - 更多li元素 - > 
< / ul> 
< / div> 
  

CSS：

  .CountryList ul 
 {
 list-style：none; 
} 
 
 .CountryList ul li {
 width：25％; 
保证金：.5em 2％; 
 float：left; 
} 
  

是否有任何CSS解决方案可以完成此项工作？

解决方案

如果您不愿意更改DOM，则必须使用 column-count 属性

演示

  .CountryList {
 -moz-column-count：10; 
 -webkit-column-count：10; 
列数：10; 
 height：100px; 
 -moz-column-gap：100px; 
 -webkit-column-gap：100px; 
 column-gap：100px; 
} 
  

---

就支持去，你可以参考这里，所以如果你愿意离开复古浏览器比其罚款，其他考虑改变DOM使用JavaScript或jQuery来实现。

I am trying to get the country list in 2 columns.

My current CSS makes the list display one after the other as below:

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

But I want my country to be displayed as below without changing the 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;
}

Is there any CSS solution to get this done ?

解决方案

If you are not willing to change the DOM, than you will have to use column-count property

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;
}

---

As far as the support goes, you can refer it here, so if you are willing to leave vintage browsers than its fine, else consider changing the DOM else use JavaScript or jQuery to achieve that.

这篇关于以2列的字母顺序获取国家列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！