listes à puces comme colonnes

Question

Je suis en train d'utiliser les listes à puces sous forme de colonnes configuration quelque chose comme ce qui suit:

<ul> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
</ul> 
<ul> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
</ul> 

Qu'est-ce que je dois faire pour autant que css ceux-ci à côté de gamme par côté listes comme verticales sans balles. Je suis sûr qu'il me manque quelque chose de simple mais je n'arrive pas à le comprendre. J'ai spécifiquement besoin de cela pour travailler dans IE7.

Merci à l'avance, Ben

Answer 1

Voici la réponse très court:

ul { 
    float: left; 
    list-style-type: none; 
} 

Voici l'explication un peu plus:

• La partie float indique vos listes de se déplacer ensemble " sur la même ligne ". Vous pouvez également ajouter une propriété width aux éléments ul afin d'obtenir des colonnes également distribuées. La propriété list-style-type désactive simplement vos puces. Très probablement, vous aurez maintenant un espace vide là où se trouvaient les balles. Cela peut être supprimé en remplaçant maring et padding - par exemple. mettez-les tous les deux à zéro.

Vous pouvez également ajouter une clear: left propriété sur tout élément suit les listes.

Answer 2

<div class="wrapper"> 
<ul> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
</ul> 
<ul> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
</ul> 
<div class="clear"></div> 
</div> 

<style type="text/css"> 
ul {width: 40%; float: left;list-style-type: none;} 
ul li {list-style-type: none;} 
.clear {clear:both;font-size:0px;line-height:0px;height:0px;} 
</style> 

Quelque chose le long de ces lignes ... garder à l'esprit que cela va paraître un peu plus « standard » entre les navigateurs si vous avez un bloc de réinitialisation CSS décent. Je recommande Blueprint.

Answer 3

Voici un exemple:

<div id="menucontainer"> 
    <ul> 
    <li>w1</li> 
    <li>w2</li> 
    </ul> 
</div> 

Css:

#menucontainer ul { 
    list-style-type: none; 
} 

#menucontainer ul li { 
    display: inline; 
    padding: 0.1em; 
}