alignant les éléments de liste dans deux côte à côte les listes à puces

Question

je suis en train d'aligner les éléments de la liste ensemble côte à côte deux listes à puces côte à côte comme ceci:

list element 1  list element 1 
list element 2  list element 2 
list element 3  list element 3 that 
        wraps 
list element 4  list element 4 

dès maintenant la liste sur la pellicule wont gauche avec la liste sur la droite, à la place, il montre

list element 1  list element 1 
list element 2  list element 2 
list element 3  list element 3 that 
list element 4  wraps 
        list element 4 

comment puis-je les aligner correctement? maintenant je l'ai configuration comme ceci:

css

.col {float:left;width:150px;} 

html

<div class="col"> 
    <ul> 
    <li> list element </li> 
    </ul> 
</div> 
<div class="col"> 
    <ul> 
    <li> list element </li> 
    </ul> 
</div> 

grâce

Answer 1

On dirait que vous essayez d'afficher les données tabulaires sans utiliser un tableau HTML. La motivation derrière ceci est probablement l'aversion pour les tables qui s'est ensuivie dans l'ère du design post-table. Cependant, il faut noter qu'il y a un temps et une place pour tout, et il y a une bonne raison pour que l'élément <table> ne soit pas obsolète.

Il était une fois un élément nommé <table>. CSS n'était même pas une lueur dans l'oeil de sa mère. Afin de faire apparaître les éléments comme vous le souhaitiez, vous deviez enchaîner un réseau de tables imbriquées. C'était un cauchemar. C'était un cauchemar de lire le code, de maintenir le code, et de créer le code en premier lieu! Le long de CSS est venu et tout le monde a évité les tables comme passe et interdit. Pourquoi? Parce que les gens utilisaient l'étiquette de la table comme il n'était pas prévu, la bricolant dans des endroits où il n'y avait pas d'affaire.

Maintenant, beaucoup de gens pavent <ul> de données connexes en colonnes pour représenter les tables, de peur d'utiliser l'élément <table> interdit. Mais le fait est que c'est aussi mauvais que l'utilisation abusive des tables. Il crée du code spaghetti qui est difficile à comprendre pour les lecteurs d'écran, difficile à déboguer, difficile à maintenir, et qui repose finalement sur des hacks de navigateur ou sur javascript pour le style. Cependant, pour exécuter ce hack, pour aligner des listes comme celle-ci, vous devez spécifier un attribut height pour les éléments li. Avec une hauteur statique, le positionnement de li devient prévisible et vous pouvez réellement le faire. Mais, cela ne ressemble pas à ce que vous cherchez, car il semble que LI3 doit être de hauteur fluide. La seule façon de vraiment le faire est d'utiliser jQuery ou une table HTML et de déterminer dynamiquement la hauteur de li3 et d'appliquer cette hauteur aux autres li3s. Utiliser jQuery pour accomplir ceci peut entraîner un flash de contenu non stylé, en particulier sur les connexions plus lentes et les navigateurs plus anciens. Je vous conseille fortement de reconsidérer votre HTML à la place.

Answer 2

option la plus propre et plus facile serait d'utiliser des tables

<table> 
    <tr> 
     <td class="col"> 
       <ul> 
       <li> list element </li> 
       </ul> 
     </td> 

     <td class="col"> 
       <ul> 
        <li> list element </li> 
       </ul> 
     </td> 
    </tr> 
</table>