Aligner à droite du texte dans un élément de liste

Question

J'ai une liste non ordonnée imbriquée qui a le contenu principal sur la gauche, et je voudrais ajouter des options qui sont flottantes à droite, de sorte qu'elles soient alignées sur la droite quel que soit le niveau de échancrure.

<ul> 
<li> Item 1 <span class='options'> link </span> </li> 
<li> Item 2 <span class='options'> link </span> 
    <ul> 
    <li>Item 3 <span class='options'> link </span> </li> 
    </ul> 
</li> 
</ul> 

J'ai le CSS suivant:

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width: 400px; 
} 

.options { 
    float: right; 
    width: 50px; 
} 

Lorsque cela est utilisé mais la durée des options est aligné à droite, mais 1 ligne au-dessous de la ligne prévue.

Comment puis-je aligner les options sur l'élément de liste?

TIA, Adam

Answer 1

au lieu de flotter, vous pouvez essayer le positionnement absolu.

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width: 400px; 
    position: relative; 
} 

.options { 
    width: 50px; 
    position: absolute; 
    right: 0px; 
} 

Answer 2

En utilisant cette CSS:

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width:400px; 
} 
.options { 
    float: right; 
    width: 50px; 
} 
li li { width:385px} 

Cela nécessite malheureusement votre définir une largeur moins le rembourrage. en fonction de votre flexibilité, cela fonctionnera. Testé dans Chrome 3.0.

Answer 3

Si la modification du code HTML est OK, vous pouvez entourez « Point 1 » dans une première travée et:

• flottant à gauche (encore flottant .Options à droite)
• utilisation display: inline-block sur à la fois la portée et text-align: right sur .Options, au lieu de flotteurs (pas compatible avec Fx2 cependant, et en travaillant uniquement dans IE6/7, car la durée est un des éléments en ligne par défaut. ne fonctionnerait pas avec div)