web-dev-qa-db-ja.com

リストアイテムを列として表示する方法

最初のレスポンシブレイアウトを作成しようとしています。リストアイテムを幅に応じて垂直線で表示したい。

<div style="height:800px;">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
    </ul>
</div>

 1 5 
 2 6 
 3 7 
 4

ブラウザのサイズが変更された場合、私はそれがなるようにしたい

 1 4 7 
 2 5 
 3 6

誰か助けてくれますか？何時間も試してみたが、何も手に入らない。私はテーブルを使ってみましたが、そのようにすることもできません。

csslistlistviewvertical-alignment
61
Grozav Alex Ioan

これはCSS​​列を使用して非常に簡単に実行できます。次にHTMLの例を示します。

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

#limheight li {
    display: inline-block; /*necessary*/
}
<ul id = "limheight">
 <li><a href="">Glee is awesome 1</a></li>
 <li><a href="">Glee is awesome 2</a></li>
 <li><a href="">Glee is awesome 3</a></li>
 <li><a href="">Glee is awesome 4</a></li>    
 <li><a href="">Glee is awesome 5</a></li>
 <li><a href="">Glee is awesome 6</a></li>
 <li><a href="">Glee is awesome 7</a></li>
 <li><a href="">Glee is awesome 8</a></li>
 <li><a href="">Glee is awesome 9</a></li>
 <li><a href="">Glee is awesome 10</a></li>
 <li><a href="">Glee is awesome 11</a></li>
 <li><a href="">Glee is awesome 12</a></li>    
 <li><a href="">Glee is awesome 13</a></li>
 <li><a href="">Glee is awesome 14</a></li>
 <li><a href="">Glee is awesome 15</a></li>
 <li><a href="">Glee is awesome 16</a></li>
 <li><a href="">Glee is awesome 17</a></li>    
 <li><a href="">Glee is awesome 18</a></li>
 <li><a href="">Glee is awesome 19</a></li>
 <li><a href="">Glee is awesome 20</a></li>
</ul>
88
Chris

次の例を見ると、固定幅の列が使用されており、これが要求された動作だと思います。

http://www.vanderlee.com/martijn/demo/column/

下の例が上の例と同じ場合、jquery列プラグインは必要ありません。

ul{margin:0; padding:0;}

#native {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}
<div id="native">
  <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>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
  </ul>
</div>
21
SPRBRN

この例、SPRBRNに感謝します。助けてくれました。そして、上記のコードに基づいて使用したミックスインを提案できます。

//multi-column-list( fixed columns width)
  @mixin multi-column-list($column-width, $column-rule-style) {
  -webkit-column-width: $column-width;
  -moz-column-width: $column-width;
  -o-column-width: $column-width;
  -ms-column-width: $column-width;
  column-width: $column-width;

  -webkit-column-rule-style: $column-rule-style;
  -moz-column-rule-style: $column-rule-style;
  -o-column-rule-style: $column-rule-style;
  -ms-column-rule-style: $column-rule-style;
  column-rule-style: $column-rule-style;
 }

を使用して：

   @include multi-column-list(250px, solid);
5
InaFK

必要な数のリスト要素でリストを作成します。次に、リスト要素の情報と一致するように、style = column-widthとstyle = column-gapを設定して、リストをdivで囲みます。 style = columnsを設定しないでください。画面サイズに適応する完全にレスポンシブなリスト。プラグインは必要ありません。

2
Steve Brooker

以下のようなcssの列幅プロパティを使用

<ul style="column-width:135px">
1
Siddhartha

CSS3を使用してそれを行うことができます。

HTMLコードスニペットは次のとおりです。

<ul id="listitem_ascolun">
        <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>

＆CSS3コードスニペットは次のとおりです。

#listitem_ascolun ul{margin:0;padding:0;list-style:none;}

#listitem_ascolun {
    height: 500px;  
    column-count: 4;
        -webkit-column-count: 4;
        -moz-column-count: 4;
}

#listitem_ascolun li {
    display: inline-block;
}
1
Aminul Islam