Alinear a la derecha un texto dentro de un elemento de la lista

Tengo una lista desordenada anidada que tiene contenido principal a la izquierda, y me gustaría agregar opciones que se flotan a la derecha, de modo que estén alineadas a la derecha independientemente del nivel de sangría.Alinear a la derecha un texto dentro de un elemento de la lista

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

Tengo el siguiente CSS:

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

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

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

Cuando esto se utiliza sin embargo el lapso de las opciones está alineado a la derecha, pero la línea 1 por debajo de la línea de espera.

¿Cómo puedo obtener el intervalo de opciones para alinearme con el elemento de la lista?

TIA, Adam

Fuente

2009-07-27 apchester

Usted tiene un problema con sus anchos de línea # 1, # 2 y # 3 no tienen un ancho consistente entre los navegadores, debido a la forma en que funcionan sus márgenes y sus almohadillas. – Alsciende

En lugar de flotar, es posible que desee probar el posicionamiento absoluto.

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

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

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

Fuente

2009-07-27 13:25:39 Alsciende

Perfecto esto me ayudó un regalo. Estoy siendo exigente ahora, pero la actualización de su solución sería quitar el 'px' del 0 final para 'correcto', para la mejor práctica. – Pete

El uso de este CSS:

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

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

Esto requiere por desgracia su definir un ancho de menos el relleno. dependiendo de tu flexibilidad, esto funcionará. Probado en Chrome 3.0.

Fuente

2009-07-27 13:50:25

Hum, resolvió un problema marginal, no el problema principal :). Pruebe su CSS en IE6. – Alsciende

Si se está modificando el código HTML está bien, usted podría encerrar "Artículo 1" en un primer tramo y:

flotante a la izquierda (todavía flotando .OPTIONS a la derecha)
uso en display: inline-block tanto envergadura y text-align: right en .OPTIONS, en lugar de los flotadores (no es compatible con Fx2 sin embargo, y sólo trabaja en IE6/7, porque es un lapso de elementos en línea por defecto. no trabajaría con div)

Fuente

2009-07-27 14:30:28 FelipeAls

Alinear a la derecha un texto dentro de un elemento de la lista

Respuesta

Cuestiones relacionadas