web-dev-qa-db-fra.com

Comment afficher les éléments de liste sous forme de colonnes?

J'essaie de construire ma première mise en page réactive. Je souhaite afficher les éléments de la liste sur une ligne verticale, en fonction de la largeur.

<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

Si le navigateur est redimensionné, je veux qu'il devienne

 1 4 7 
 2 5 
 3 6

Est-ce que quelqu'un peut m'aider? J'ai essayé pendant des heures et je ne peux rien obtenir. J'ai essayé d'utiliser des tables mais je ne peux pas le faire comme ça non plus.

csslistlistviewvertical-alignment
61
Grozav Alex Ioan

Cela peut être fait en utilisant des colonnes CSS assez facilement. Voici un exemple, 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

Si vous regardez l'exemple suivant, il utilise des colonnes de largeur fixe, et je pense que c'est le comportement demandé.

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

Si l'exemple du bas est identique à celui du haut, vous n'avez pas besoin du plug-in de colonne 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

Merci pour cet exemple, SPRBRN. Ça m'a aidé. Et je peux suggérer le mixin, que j'ai utilisé sur la base du code donné ci-dessus:

//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;
 }

En utilisant:

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

Créez une liste avec autant d'éléments de liste que vous le souhaitez. Ensuite, placez la liste dans un div en définissant style = column-width et style = column-gap, afin de correspondre aux informations contenues dans les éléments de votre liste. Ne définissez pas style = columns. Liste totalement réactive qui s'adapte à la taille de l'écran. Aucun plugin requis.

2
Steve Brooker

tilisez la propriété column-width de css comme ci-dessous

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

Vous pouvez le faire en utilisant CSS3.

Voici l'extrait de code 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>

& Voici l'extrait de code 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