Allineare un po 'di testo all'interno di una voce di elenco

Question

Ho un elenco non ordinato nidificato che ha il contenuto principale a sinistra e vorrei aggiungere le opzioni che sono a destra, in modo tale che siano allineate a destra indipendentemente dal livello di indentazione.

<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> 

Ho il seguente CSS:

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

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

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

Quando questo viene utilizzato invece l'arco opzioni è allineato alla destra, ma 1 riga al di sotto della linea di attesa.

Come posso ottenere lo span delle opzioni in linea con la voce di elenco?

TIA, Adam

Answer 1

Invece di galleggiamento, si consiglia di provare il posizionamento assoluto.

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

Usando questo CSS:

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

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

Ciò richiede purtroppo vostra per definire una larghezza meno l'imbottitura. a seconda della tua flessibilità questo funzionerà. Testato in Chrome 3.0.

Answer 3

Se modificando il codice HTML è OK, si potrebbe racchiudere "Articolo 1" in una prima campata e:

• float a sinistra
• uso display: inline-block su (ancora .Opzioni a destra galleggiante) sia arco e text-align: right su .Opzioni, invece di carri allegorici (non compatibile con FX2, però, e solo lavorando in IE6/7 perché arco è un elementi in linea per impostazione predefinita. non sarebbe lavorare con div)