Отображение элементов списка в нескольких столбцах - 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) не поддерживают это.

update

После того, как вы обновили свой вопрос с помощью кода, некоторые вещи:

1. Не используйте таблицу
2. В этом случае примените счетчик столбцов к окружающему элементу (так теперь к таблице, но лучше, если вы измените его на div.
3. Еще лучше сделать упаковщик упорядоченным списком (ol), каждая буква - li, а затем для каждой страны для каждой буквы - другой список (но на этот раз неупорядоченный). Я обновилмой пример, чтобы отразить это лучше.