Qu'est-ce qui contrôle l'espace horizontal entre les niveaux de la liste imbriquée?

Question

Voici trois plans du même code illustrant ce que je veux dire. Comme vous pouvez le voir, ils varient vraiment.

Et le code, pour référence, est:

<ul> 
<li>num 1</li> 
    <ul> 
    <li>num 1.1</li> 
    <li>num 1.2</li> 
    <ul> 
    <li>3rd level</li> 
    </ul> 
    </ul> 
<li>num 2</li> 
</ul> 

Je suppose que cela pourrait être dû à une variété de choses, mais il ne fait pas de mal à poser. 1:

Answer 1

L'espace vertical est généralement contrôlé par CSS avec line-height. Par exemple,

li { line-height: 40px; } 

Vous trouverez peut-être this article utile, qui énumère quelques-uns des attributs CSS communs utilisés pour les listes de style

EDIT:

En réponse à votre question éditée, vous pouvez contrôler espacement horiztonal en utilisant margin-left. par exemple

<ul> 
<li>num 1 
    <ul> 
    <li>num 1.1</li> 
    <li>num 1.2 
    <ul> 
    <li>3rd level</li> 
    </ul> 
    </li> 
    </ul> 
</li> 
<li>num 2</li> 
</ul> 

avec CSS

li ul li { margin-left:100px; } 

volonté listes d'espace de profondeur 1 ou plus 100px à droite. Here's how that looks

Answer 2

Je me tourne généralement au large d'un rembourrage de marge et la hauteur de ligne pour li, ul, ol en CSS. Je suis presque certain la plupart des navigateurs utilisent des marges pour définir cette, mais pour être sûr que je les ai mis tous à 0.

ul, ol, li { 
    padding: 0; 
    margin: 0; 
    line-height: 0; 
} 

Answer 3

Il me semble que votre HTML est erroné, vous ne pouvez pas avoir un ul dans un ul. La syntaxe correcte est:

<ul> 
<li>num 1 
    <ul> 
    <li>num 1.1</li> 
    <li>num 1.2 
    <ul> 
    <li>3rd level</li> 
    </ul> 
    </li> 
    </ul> 
</li> 
<li>num 2</li> 
</ul> 

Notez que tous les ont déménagé à la fin de li de clôture de cet élément de liste (y compris ses sous-éléments). En utilisant une réinitialisation css, il devrait s'afficher de la même manière dans tous les navigateurs (plus ou moins ...)

Answer 4

Dépend de la manière dont vous souhaitez ajouter l'espacement. Vous pouvez utiliser la marge supérieure/inférieure ou le remplissage. Dans votre cas je choisirais la marge:

li { 
    margin: 5px 10px 5px 1em; 
} 

Assurez-vous également que vous utilisez une classe de réinitialisation pour normaliser les différences entre les navigateurs.