Как расположить элементы списка в строку по два пункта?

Question

[rondew]

есть ненумерованный список из шести пунктов. мне нужно, чтобы внутри контейнера каждый третий пункт переносился бы на следующую строчку. то есть нужно получить три столбца по два пункта. я что-то с ног сбился искать(

Comments

[sainnr]

>> в строку по два пункта
>> каждый третий пункт переносился бы на следующую строчку
>> три столбца по два пункта

Мне кажется, где-то здесь есть ошибка…

[simplecode]

если бы не теги…
хорошо бы в вопросе уточнить про какие списки идет речь… на будущее…

[Евгений]

Требуется разместить элементы списка таким образом?


Или таким?

[Kakysha]

Таким.

[rondew]

Kakysha прав. три столбца по два пункта.
речь о списке

.

[rondew]

парсер съел:

[rondew]

блин. короче, речь об ul-списке.

Answer 1

[Ano]

<style>
    li { float: left; margin: 1em; }
    li:nth-child(2n+1) { clear: both; }
</style>
<ul>
    <li> 1
    <li> 2
    <li> 3
    <li> 4
    <li> 5
    <li> 6
</ul>

Comments

[Ano]

Ой, три столбца — 3n+1.

[rondew]

@Ano, спасибо! это именно то, что нужно. я вчера дошел до nth-child, но зачем-то делал float: left, каждому четному. естественно, это не работало.

[rondew]

я было подумал, что nth-child — новая эпоха. но радовался ровно сутки, пока не выяснилось, что мне надо срочно кучу всего переверстать, тк этот псевдокласс видит только 9ый ИЕ. очень жаль(

Answer 2

[cthtuf]

Если есть возможность отредактировать скрипт, то каждому четвертому элементу присваивать класс, и всего делов.
Если нет возможности, то добавлять класс каждому четвертому элементу списка через js.

Comments

[rondew]

спасибо. собственно, вот ниже посоветовали, как это через css сделать.

Answer 3

[Kakysha]

Может я конечно профан, но я пришел к выводу вчера, что это сделать одним ксс невозможно. Исправьте, если я не прав, мы с автором будем благодарны вам. Я решил только разбиением на несколько списков.

Comments

[Виталий]

Тоже искал решение подобной задачи. Сделал через JS, путём добавления каждые N строк кода "". Соответственно я делал через таблицы.

[sainnr]

Вот здесь есть решение, несколькими похожими способами. Правда, не очень элегантно и гибко, но тем не менее (хотя ex.4 в принципе неплох).

[rondew]

разбить на несколько списков не могу, потому что список генерируется с помощью вордпрессовского wp_list_pages ();, а не мню лично. на другом ресурсе предложили на пхп обернуть каждые два в див. не изящно, но, наверное, сработает.

@killbill, а не подскажете решение на JS?

завтра буду смотреть примеры с www.alistapart.com/articles/multicolumnlists
спасибо всем большое, отпишусь о результатах.