Как я могу отобразить <ul>как два соседних столбца, используя CSS?

Question

Как сделать 2 столбца, состоящих из 3 строк?

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

Спасибо

Answer 1

Простым чистым решением CSS было бы иметь элементы списка шириной в 1/2, и они должны плавать влево. Это приемлемое решение, если вы можете принять следующий вывод.

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

CSS будет:

ul.class-name li {
    float:left; width:50%;
}

Есть несколько простых соображений:

• В IE pre 9 ваш контейнер (ul) должен иметь присвоенную ширину.
• При 50% у вас нет места для отступов или границ в зависимости от того, как IE pre 9 рассчитывает их по сравнению с другими браузерами. (т.е. один включает отступ в заданную ширину, другой добавляет отступ к ширине). Снижение до 47-49% часто исправляет эти жалкие ошибки.

К сожалению, это единственный выход, если вы ищете чистый CSS. Если вам нужно:

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

... тогда решение Valchris может быть лучшим для вас.

FuzzicalLogic

Answer 2

Вот ужасное, но забавное решение CSS1, которое я собрал несколько лет назад:
http://phrogz.net/tmp/two-column-list-pure-css.html

:)

Answer 3

http://www.w3.org/Style/Examples/007/evenodd.en.html

<ul>   
    <li> Test 1</li>
    <li> Test 1</li>
    <li> Test 1</li>
    <li> Test 1</li>  
</ul>

CSS это:

li:nth-child(n+3) {
    background-color:white; 
}

Это должно помочь

использовать этот сайт: http://cssdesk.com/ для демонстрации вашего кода.