11

重複の可能性：
CSS：リストをページ上の列に分割する方法は？

私はこの解決策を探していましたが、それを見つけることができなかったので、私が作ったものを投稿しようと思いました。

私は、5番目の項目の後にリストが折り返され、別の列に移動する単一のリストを作成しようとしていました。これは、ユーザーが必要とするアイテムの数に応じて非常に動的にできるようにするためです。

ここに画像の説明を入力してください

これが私が思いついた解決策です。

 li{
   position: relative;
   line-height: -6px;
}
    
 ol li:nth-child(6) {
    margin-top: -90px;
}
    
 ol li:nth-child(-n+5){
    margin-left: 0em;
 }
    
 ol li:nth-child(n+6){
   margin-left: 10em;
 }
 <ol>
      <li>Aloe</li>
      <li>Bergamot</li>
      <li>Calendula</li>
      <li>Damiana</li>
      <li>Elderflower</li>
      <li>Feverfew</li>
      <li>Ginger</li>
      <li>Hops</li>
      <li>Iris</li>
      <li>Juniper</li>
 </ol>

これがフィドルです：http：//jsfiddle.net/im_benton/tHjeJ/

私の解決策についてどう思いますか？IEで機能するソリューションは何ですか？

4

2 に答える 2

26

@tuffが提案したように、以下を使用してみてください。

ol {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

http://jsfiddle.net/tHjeJ/6/

于 2012-10-19T19:17:42.543 に答える
0

2つの列が必要な場合は、それほど難しくありません。リストで次のようなものを試すことができます。

ol{ width:300px;}

li{
  width:50%;  
  float:left;
}​

li番号を列番号で割ると、実際には各列に同数のリスト項目がラップされます。

あなたの写真のように数え上げをしたい場合は、各列にdivを折り返すことを使用してstartから、リストの属性を使用することができます...それは次のようになりますstart="6"

于 2012-10-19T19:31:15.553 に答える