CSS avec Aligné LI dans un UL

Je suis en train d'avoir quelques LIs dans un UL aligner à gauche, à droite et au centre à l'intérieur d'une page. Pour la vie de moi, je ne peux pas comprendre comment garder quelque chose "centré" sur la même ligne que un à gauche et à droite aligné LI.

ul {
    margin:1em 0;
    padding:0
} 

ul li{
    display:inline-block;
    white-space:nowrap; 
    margin:5px
} 

ul li.left{
    float: left; 
    text-align:left; 
} 

ul li.center{
    float:left; 
    text-align: center;
} 

ul li.right{
    float: right; 
    text-align:right; 
} 
<ul> 
    <li class="left">left</li> 
    <li class="center">center</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
</ul>

Peut aider quelqu'un? BTW, j'ai essayé d'éviter les DIVs.

Merci!

InformationsquelleAutor Alex | 2011-01-14
  1. 4

    Si vous voulez chacun de partager l'espace de l'écran tout aussi, vous pouvez faire ceci:

    <style>
    .split { width: 33%; float: left; }
</style>

<ul>
    <li class="split">left</li>
    <li class="split">center</li>
    <li class="split">right</li>
</ul>

    Vous aurez envie de passer vos styles à une feuille de style externe, si.

    • Je veux le droit d'être alignés comme à droite, à gauche, à gauche, et centre de... vous l'aurez deviné. Même l'espacement est trop important, mais pas nécessaire parce que la "taille" du contenu peut varier de chaque colonne.
    • btw, j'ai mes styles externe dans une feuille, je viens d'emménager à la page principale pour les tests.
    • oh, je vois ce que vous voulez faire. vous voulez donc potentiellement avoir 3 éléments dans la gauche, 2 au centre et 4 sur le côté droit. le nombre de chaque côté de modification, de rectification? si oui, pourquoi êtes-vous de direction loin de divs?
    • Regardez le code que j'ai posté plus tard. J'ai tout compris (je pense) 😛 je veux être en mesure de simplement déposer n'importe quel "type" de l'UL (3/2/1 objets) et de simplement être en mesure d'avoir de l'espace correctement.
    InformationsquelleAutor mitch
  2. 1

    Vous pouvez certainement le faire avec une seule chose flottaison.

    ul li { float:right; }

    Si vous flottez tous vers la gauche, puis vous obtiendrez (avec trois LI-éléments), une à droite, au centre et à gauche.

    <ul><li>right</li><li>center</li><li>left</li></ul>

    Une bonne façon de penser, c'est penser ce que vous voulez arriver à chaque élément LI: vous voulez à chacun d'être déplacé vers la droite de l'autre. C'est la méthode la plus commune de faire de la navigation horizontale avec une structure de liste.

    InformationsquelleAutor h4xnoodle
  3. 0

    Votre li éléments de la être aussi large que le texte qu'il contient, puisque vous êtes flottant entre eux et ne sont pas en spécifiant la largeur. Voulez-vous votre centre de l'élément liquide? Si je ne suis pas d'erreur., il semble que vous allez pour un fluide disposition en trois colonnes? Il y a beaucoup d'exemples sur le net, si c'est ce que vous allez pour.

    • Eh bien, je suis en train de faire un rapport. La version imprimable aura un/deux/trois lignes par "ul groupe", mais sur l'écran, ça va être un jeu d'ul. J'essaie de garder le tout uniformément espacés.
    InformationsquelleAutor Calvin
  4. 0

    Merci à mitch et tous les autres, c'est la solution que j'ai trouvé et qui fonctionne pour moi.

    <style>  
ul {
    margin: 1em 0;
    padding: 0;
    list-style-type:none;
}

li.three {
    width: 33%; 
}

li.two {
    width: 50%; 
}

li.one {
    width: 100%;    
}

li.left {
    float: left;
    text-align: left;   
}

li.center {
    width: 33%;
    float: left;
    text-align: center;
}

li.right {
    width: 33%;
    float: right;
    text-align: right;
}


</style>
    <ul> 
    <li class="three left">left</li> 
    <li class="three center">center</li> 
    <li class="three right">right</li> 
</ul> 


<ul> 
    <li class="two left">left</li> 
    <li class="two right">right</li> 
</ul> 

<ul> 
    <li class="one left">left</li> 
</ul>
    InformationsquelleAutor Alex