2010-12-13 12 views
2

Je dois construire une page qui a une liste qui tient dans deux colonnes. Cette liste est générée par PHP, donc il est facile d'ajouter des entrées.Comment je peux faire une liste de 2 colonnes en XHTML/CSS valide?

Il faut aimer:

* Lorem Ipsum   * Lorem Ipsum 
* Lorem Ipsum   * Lorem Ipsum 
* Lorem Ipsum   * Lorem Ipsum 
* Lorem Ipsum   * Lorem Ipsum 
* Lorem Ipsum   * Lorem Ipsum 

Je voudrais savoir s'il y a un moyen de générer ce avec une structure de base de <ul /> et <li />:

<ul> 
    <li>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
</ul> 

Je dois soutenir les principaux navigateurs (et IE7, 6 non pris en charge).

Merci d'avance!

Répondre

2

J'ai trouvé la solution à ceci:

ul li { 
    margin: 0; 
    padding: 0; 
    width: 50%; 
    float: left; 
} 
+0

Oh wow, qui fonctionne assez bien! –

2

Comme expliqué here, une façon simple de le faire est de donner une largeur explicite à la liste et ses articles et ont les éléments flottent à la gauche:

ul { 
    width: 700px; 
} 

li { 
    width: 200px; 
    float: left; 
} 
0

Vous recherchez la propriété multicolonne CSS3. Malheureusement, contrairement à la plupart des fonctionnalités offertes par les spécifications CSS3, presque aucun navigateur ne le supporte pour l'instant. Il y a un javascript disponible mais qui peut le faire fonctionner dans la plupart des navigateurs:

http://www.alistapart.com/articles/css3multicolumn/