在多列中显示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

假设每个字母+它的子项为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，然后为每个国家/地区的每个国家/地区提供另一个列表（但这次是无序的）更为明智。我已经更新了我的例子以更好地反映这一点。

Answer 2

尝试仅将以下CSS用于您的div，

列宽：300px； 栏距：20px；

如果还要调整浏览器的大小，它将与多列对齐。