html - 如何在 CSS 中设置 ul li 样式？

Question

可能重复：
我想将列表项显示为 2 列或更多列（动态对齐）

对不起我的英语不好！

我对 ul li 有疑问：

我的 HTML：

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

我的CSS：

ul {
width:60px;

}

ul li{
float:left;
width:20px;
list-style:none;
}

我的列表分为 3 列，例如：

1 2 3
4 5 6
7 8 9
10

所以，我的问题是：我怎样才能对我的列表进行排序：

1 4 7 10
2 5 8
3 6 9

感谢您的帮助：D

Answer 1

您可以为此使用css3 column-count属性检查更多信息

我想将列表项显示为 2 列或更多列（动态对齐）

Answer 2

请参阅小提琴的代码和演示

小提琴：http: //jsfiddle.net/pGHCd/

演示：http: //jsfiddle.net/pGHCd/embedded/result/

ss:

Answer 3

嗨，您可以像这样在 css3 属性上执行此操作

CSS

ul{
    -moz-column-count: 3;
    -moz-column-gap: 33%;
    -webkit-column-count: 3;
    -webkit-column-gap: 33%;
    column-count: 4;
    column-gap: 33%;
    background:green;
    width:100px;

}
li{
    height:20px;
    list-style:none;
}

HTML

<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>
</ul>
​

现场演示http://jsfiddle.net/rohitazad/pMbtk/376/

但不是工作IE

Answer 4

CSS3 来救援！

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
}

​</p>

​</p>

http://jsfiddle.net/rlemon/Y5ZvA/2/