Lista alineada a la derecha de CSS
Frecuentes
Visto 81,082 veces
20
¿Cómo debo alinear la lista a la derecha? El texto se alinea perfectamente, sin embargo las balas no. ¿Hay una manera simple y fácil de hacerlo con CSS?
Código:
<ul style="text-align: right">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Incluso si pongo las reglas para que los elementos LI se alineen directamente a la derecha, no funciona.
EDITAR
Adjunto una imagen que muestra lo que quiero lograr:
4 Respuestas
30
Si necesita alinear las viñetas con el texto, puede usar el list-style-position
atributo, de la siguiente manera:
.theList
{
text-align: right;
list-style-position: inside;
}
contestado el 03 de mayo de 12 a las 13:05
.theList donde esta esta clase, con ul o li - Wasim A.
en mi caso, agregué html{direction:rtl;} - Wasim A.
@wasim se aplica a UL. La dirección Rtl hace algo diferente (alineado a la derecha con la viñeta a la derecha del texto) porque no está diseñado para diseñar sino para lenguajes de diseño Rtl. Evitaría usar un estilo por su efecto en lugar de su intención. - Adriano Repetti
Un poco tarde para el juego, pero es posible alinear las balas adentro y también alinearlas a la derecha. - Lukramon
20
Dirección de uso:
direction: rtl;
Generalmente se usa para idiomas de derecha a izquierda.
editar:
Flota cada uno a la derecha y despeja ambos.
float: right;
clear: both;
contestado el 03 de mayo de 12 a las 13:05
Gracias por la respuesta, pero invierte las viñetas con el texto; esto no es lo que necesito. - lukas.pukenis
Luego, reformule su pregunta y agregue una imagen del resultado deseado. Porque claramente entendí mal. - Fantasma de Madara
Su sugerencia con float: right funciona un poco, sin embargo, con clear: tanto rompe mi diseño como el elemento se coloca fuera del contenedor principal: lukas.pukenis
Continuaremos esto cuando llegue a una computadora. No puedo ayudarte mucho más desde el móvil. @lukas- Fantasma de Madara
Prefiero la solución de dirección, me salvaste el día (y) - dzgeek
2
Si entiendo su requisito correctamente, entonces simplemente flotar a la derecha los elementos li debería ser suficiente: http://jsfiddle.net/Jxzs4/1/
contestado el 03 de mayo de 12 a las 13:05
-3
<ul style="float:right; text-align:left; list-style:none;">
Mira esto.....
si quieres balas quitalas list-style:none;
contestado el 03 de mayo de 12 a las 13:05
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css or haz tu propia pregunta.
No estoy seguro de lo que estás tratando de lograr. Es este (ver con FF)? - Jon
@Jon, no, mira la imagen que he adjuntado: lukas.pukenis
Similar a : stackoverflow.com/questions/4977807/… - swati