Afficher les éléments dans les colonnes de façon dynamique?

Je voudrais afficher une liste d'éléments dans plusieurs colonnes sans avoir à spécifier le nombre de colonnes, et laisser le navigateur ajouter plus de colonnes afin que tous les éléments correspondent.Afficher les éléments dans les colonnes de façon dynamique?

J'ai essayé d'adapter this article, mais les articles sont énumérées ci-dessus comme une longue liste d'une colonne:

<head> 
    <STYLE type="text/css"> 
     ul.columns { 
      float: left; 
      width: 12em; 
      margin: 20px 0 1em; 
      padding: 0; 
      list-style: none; 
     } 

     li.columns { 
      float: left; 
      width: 6em; 
      margin: 0; 
      padding: 0; 
      list-style: none; 
     } 
    </STYLE>  
</head> 

<body> 

<ul class="columns"> 
    <li class='colums'>test</li> 
    <li class='colums'>test</li> 
    <li class='colums'>test</li> 
    <li class='colums'>test</li> 
    <li class='colums'>test</li> 
</ul>

Tout expert CSS pourrait me dire ce qui ne va pas avec ce qui précède?

Source

2010-08-10 Gulbahar

Je ne suis pas expert, mais "colonnes" est mal orthographié ...

<li class='colums'>

Techniquement, vos <li> s ne nécessitent pas de classe. Vous pouvez utiliser ce sélecteur à la place ...

ul.columns li { 
    float: left; 
    width: 6em; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}

Source

2010-08-10 13:21:17

Merci beaucoup Josh. Fonctionne parfaitement. – Gulbahar

Afficher les éléments dans les colonnes de façon dynamique?

Répondre

Questions connexes