Разделенные теги `li` между двумя столбцами

Question

Как можно, Эти значения делятся между тремя столбцами с CSS и width: auto; как динамические?

Как это: http://img4up.com/up2/20239064020416631754.gif

Пример: http://jsfiddle.net/r3rm9/

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

Answer 1

Вы можете начать со свойств столбца CSS3, но в данный момент поддержка не очень хорошая.

http://jsfiddle.net/GolezTrol/r3rm9/4/

Answer 2

Эта статья http://www.alistapart.com/articles/multicolumnlists/ показывает несколько вариантов создания списков из нескольких столбцов, которые стоит проверить. Особенно, если нумерация ДОЛЖНА быть сверху вниз, а не слева направо / справа налево.

Answer 3

Как насчет этого?

http://jsfiddle.net/r3rm9/1/

ul li{
    list-style-image:url(http://i.stack.imgur.com/so5PA.png);
    float: left;
    width: 30%;
}

Answer 4

Дайте вашему <ul> определенную ширину.А твои <li> и плавают.

ul {
    float: right;
    text-align: right;
    direction: rtl;
    margin: 50px 50px 0 0;
    width: 207px;
}

ul li {
    list-style-image: url(http://i.stack.imgur.com/so5PA.png);
    float: left;
    width: 55px;
}