css - 在多列中显示列表元素 - CSS

Question

我正在遍历国家以按字母顺序获取国家列表。需要的显示形式如下图所示:

不过我现在是这样的

我正在使用无序列表来实现预期的结果。

这是代码:-

View 中的代码:-

<% User.find(:all, :order => "name").group_by(&:initial).each do |initial, users| %>
<table>
 <ul>   
  <li><%= content_tag(:h3, initial)%> </li>
 </ul>

  <% users.each do |user|%>
 <ul>
   <li> <%= link_to(user.name, user)%> </li>
 </ul>
  <% end %>

  </table>
<% end %>

CSS:-

ul {

    list-style: none;

}

有人可以指导我吗？

谢谢

Answer 1

假设每个字母 + 它的 child 是一个 li，ol 是周围的标签，您可以使用类似的东西:

ol {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

示例:http://jsfiddle.net/rDQe5/1/

请注意，有些浏览器(尤其是较旧的 IE 版本)不支持此功能。

更新

用代码更新问题后，一些事情:

1. 不要使用表格
2. 在这种情况下，将列数应用于周围的元素(现在应用于表格，但最好将其更改为 div。
3. 更好的做法是让包装器成为一个有序列表 (ol)，每个字母都是一个 li，然后每个国家/地区的每个字母都是另一个列表(但这时间无序)。我更新了示例以更好地反射(reflect)这一点。