Listas Espaciadas en tus entradas

Esto es sencillo así que vamos al grano

Digamos que tienes una lista de este tipo:

  • Elemento A
  • Elemento B
  • Elemento C

… pero te gustaría que se viera así:

  • Elemento A

  • Elemento B

  • Elemento C

Y es que cuando tienes listas con mucho texto, ampliar el espacio entre cada elemento puede mejorar su legibilidad.

Hasta donde yo sé, hacer esto en el editor visual no es posible (a menos que crees un nuevo tipo de <ul> para los elementos de lista).

Para añadir espacio extra tienes que ir al editor HTML. En WordPress 2.5 elige la pestaña «HTML» del editor de entradas (en las versiones 2.x la pestaña se llama «Código»).

Así sería tu código de lista original:

<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>

Pues bien, para crear espacios extra simplemente añade las etiquetas <p> y </p> al comienzo y final, respectivamente, de cada elemento de la lista. Sería algo así:

<ul>
<li><p>Elemento A</p></li>
<li><p>Elemento B</p></li>
<li><p>Elemento C</p></li>
</ul>

Luego guardas tu entrada Et voilà! Listas espaciadas.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

17 comentarios en “Listas Espaciadas en tus entradas”

  1. Un truco que funciona visualmente, pero que es incorrecto semánticamente. Incluso en vuestro ejemplo os salen mal los «bullets» 😛

    Poniendo una clase en la CSS que añada más margen a los li y yendo luego al editor HTML para añadir al UL el class nos ahorramos más pasos (si lo tenemos que hacer a menudo) y es más correcto.

    Un saludo.

  2. fernando, la verdad q tu blog me fue de mucha ayude para armar el mio, pero tengo una duda. se q no tiene que ver con este post, pero si me podes responder al mail te lo agradeceria
    ¿como coloco «idtabs» en mi blog?

  3. y otra cosa.. anda «lento» el tema este, gray beauty… tarda en actualizarse, no reacciona rapido a los cambios… alguna posible solucion?

  4. Pingback: Listas Espaciadas en tus entradas » Cosas sencillas

  5. Como?
    Porque não, em seu CSS, usar:
    li {margin-bottom:1em}

    Funciona. Sua solução (), no meu Firefox, não funcionou.

    Abraços

  6. Buena opción si quieres que te salgan así todas las listas Alé, pero si solo lo quieres en una lista concreta mejor usar un truco temporal ¿no crees?

    Gracias por tu aportación
    Obrigado

  7. verdade.
    mas ainda sim temos uma solução CSS:

    ul.espacios li {margin-bottom:1em}

    e no seu post:

    Item 1
    Item 2
    Item 3

    imagina uma lista grande…
    complicado colocar para cada , não?

    bom o papo.
    parabéns pelo blog e obrigado pelo espaço.

    abs e saudações brasileiras!

  8. fernando aun espero tu respuesta, mi principal inquietud es el porque de la tardanza al editar el etilo imageless_gray_beauty

    gracias

  9. fede, este no es el post adecuado, aquí hablamos de otra cosa y sería offtopic, por eso no te he contestado, disculpa 😉

    No entiendo bien tu pregunta y te animo a pasarte por el foro y explicarnos algo mas el problema, en que situación suceder, etc.

  10. Pues si, es válido el uso de «p» para cosas temporales, WP lo acepta. Lo que no entiendo es si se trata del WP 2.5 pero hay códigos que antes me aceptaba en los post y ahora no, tales como o . El asunto me trae desconcertado.

  11. Si, eso funciona. Pero me gustaría saber como añadir líneas en blanco extras entre párrafos, ocasionalmente. Con versiones anteriores WP me aceptaba brake lines (br /). Pero WP 2.5.1 no. Tampoco me acepta el código que antes usaba ni ni nada parecido, cuando quiero que el siguiente párrafo de texto comience al final de una imagen larga, o que no me escriba por los lados de una imagen pequeña que quiero centrar ocasionalmente. Si lo inserto en vista de código, como antes, WP parece rechazarlo hora, lo borra y lo deja sin efecto. ¿Alguien sabe por qué?

  12. Lo siento, pero no se mostró el código que quise colocar, ni encerrándolo entre las etiquetas «code», así que lo repito entre paréntesis:
    … el código que antes usaba: (br clear=»left» /) ni (br clear=»both» /) ni nada parecido…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido