1

重複の可能性:
リスト アイテムを 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

4

4 に答える 4

3

これにはcss3 プロパティを使用できます詳細column-countについては、これを確認してください

リスト項目を 2 列以上で表示したい (動的配置)

于 2012-04-05T03:46:18.850 に答える
1

コードとデモについては、フィドルを参照してください

フィドル: http://jsfiddle.net/pGHCd/

デモ: http://jsfiddle.net/pGHCd/embedded/result/

ss:

ここに画像の説明を入力

于 2012-04-05T04:05:13.940 に答える
0

こんにちは、このように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ではありません

于 2012-04-05T04:10:41.240 に答える
0

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/

于 2012-04-05T03:53:33.460 に答える