<ul> переполнение на следующую строку в XHTML и CSS

Question

У меня есть список предметов (<ul>, содержащий <li>), которые я хочу ограничить по высоте. Допустим, у меня есть следующий код:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
</ul>

Это будет отображаться так:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Я бы хотел, чтобы это отображалось так:

Item 1       Item 4
Item 2       Item 5
Item 3       Item 6

Есть ли способ добиться этого без таблиц и без использования различных тегов <ul>?

Я ищу что-то вроде этого - <ul limit="3">, но я не против ограничить его ростом (т.е. <ul limit="60px">)

Причина, по которой я хочу эту функцию, заключается в том, что я генерирую теги <li> динамически. Я использую Ruby on Rails - если это невозможно с простыми XHTML и CSS - есть ли способ добиться этого - это Rails без ограничения представления?

Answer 1

Является ли заказ жестким требованием? Если ширина элементов известна, вы можете сделать это:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
</ul>

CSS:

ul { width: 100px; }

li { width: 50px; display: block; float: left; }

Это будет выглядеть так:

Item 1     Item 2
Item 3     Item 4
Item 5     Item 6

Answer 2

Для сортировки массива в правильном порядке с использованием плавающего решения:

a = [1,2,3,4,5,6,7,8]
a.partition{|el|el % 2 == 1}.flatten
a => [1,3,5,7,2,4,6,8]

Answer 3

Я могу ответить за часть XHTML / CSS: нет, к сожалению, пока нет. В будущем у нас будет CSS-столбцов . Я знаю, что это обычно делается сейчас, разбивая его на разные списки.

Обновление Существует следующее: http://www.alistapart.com/articles/multicolumnlists/, которое дает несколько способов сделать это, но я не продам их, особенно для запрограммированного вывода.