在两列之间划分标记`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

为您的<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;
}

Answer 4

这个怎么样？

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

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