在多列中显示List元素 - CSS

Question

我正在循环遍历各国,按字母顺序获取国家/地区列表.所需的显示形式如下图所示:

但是我现在正是这样的

我正在使用无序列表来实现所需的结果.

这是代码: -

视图中的代码: -

<% 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

假设每个字母+它的子项是a li,并且ol是周围的标记,你可以使用类似的东西:

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

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

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

更新

在您使用代码更新问题后,有些事情:

1. 不要使用桌子
2. 在这种情况下,将列数应用于周围的元素(现在应用于表中,但如果将其更改为a,则更好div.
3. 更有利的做法是使包装器成为有序列表(ol),每个字母为a li,然后为每个国家/地区的每个字母添加另一个列表(但这次是无序的).我已经更新了我的例子以更好地反映出来.