2010-12-04 13 views
5

Fue difícil formular esta pregunta.¿Cómo se "refleja" las viñetas de una lista desordenada?

Supongo que la mayoría de ustedes saben que una lista desordenada normal tiene las viñetas en el lado izquierdo. Me gustaría saber si es posible obtener estas viñetas en el lado derecho (las soluciones de jquery están bien).

Para entrar en detalles un poco, asumir que:

  1. Hay 2 listas que quiero visualizar de lado a lado: foo y bar.
  2. La alineación de texto de la lista bar debe estar a la derecha.
  3. Las viñetas de la lista bar deben estar en el lado opuesto.

P.S. Ya que creo que alguien dirá: "¿Por qué? ¿Por qué en nombre de todo lo que es lógico, querrías hacer tal cosa?" Mi humilde, pero ilógico self-monkeys debe confesar que está un poco aburrido de la "norma". ;)

Editar:

El uso de dir='rtl' no funcionará para mi caso, ya que da lugar a efectos no deseados debido a mí sólo querer la bala invierte, no la pena también.

+0

'dir = 'rtf'' estará bien si solo invierte la oración. –

+0

Bizarro cuántas veces la gente ha puesto 'dir = 'rtf'' en esta página. ¿Copiar y pegar o simplemente un error de grupo? ;) –

+1

@bmoeskau: Creo que somos los desafortunados propietarios de teclados desobedientes. ;) –

Respuesta

2

Si no puede utilizar dir='rtl', creo que no hay una buena solución realmente. Podría usar CSS para deshabilitar las viñetas de la lista predeterminada y, en su lugar, colocar una imagen de fondo como solución temporal. Alternativamente, podría hacer algo como esto:

<table> 
    <tr><td>First point. </td><td> <li> </li></td></tr> 
    <tr><td>Second point. </td><td> <li> </li></td></tr> 
</table> 

Cuál es una solución de aspecto desagradable, pero hace lo que quiere. Las tablas para el diseño son obviamente indeseables, pero aquí creo que un CSS equivalente en términos de posicionamiento y alineación de altura variable sería bastante más complejo.

+2

Yo recomendaría desactivar las viñetas y burlar una imagen en el relleno. Por lo menos te deja con la estructura ul/li en el marcado. –

1

Probar <ul dir='rtl'>...</ul>.

El fragmento dir='rtf' le dice al navegador que el texto debe leerse de derecha a izquierda ("dirección: de derecha a izquierda").

Editar: Ver comentarios! ¡Esto no debería usarse para idiomas de izquierda a derecha!

+0

@closure qué hace dir ??? do – kobe

+0

Por favor, mira mi edición. :] – ClosureCowboy

+0

@gov 'dir' significa control de dirección http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-dir – peakit

0

Se puede hacer con css utilizando el atributo de dirección. Solo haz direction:rtl.

El cuadro completo:

<ul style="float:left"> 
    <li>Foo</li> 
    <li>Bar</li> 
</ul> 
<ul style="direction:rtl;float:right;"> 
    <li>Foo</li> 
    <li>Bar</li> 
</ul> 

http://startwithabreak.com/misc/test.html

+0

Si reemplaza 'Foo' y' Bar' con oraciones completas, notará un efecto no deseado (como notó Closure Cowboy). –

+0

Eh, ¿con qué frecuencia necesita períodos en las listas de todos modos? – Radu

Cuestiones relacionadas