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.

Para saber más:

http://www.noquierotrabajar.com Invidia

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

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

y otra cosa.. anda “lento” el tema este, gray beauty… tarda en actualizarse, no reacciona rapido a los cambios… alguna posible solucion?
Pingback: Listas Espaciadas en tus entradas » Cosas sencillas
http://labpress.com.br Alê

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

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

Abraços
http://fernandotellado.com/ Fernando Tellado

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
http://labpress.com.br Alê

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!
http://labpress.com.br Alê

ps: as tags se perderam no comentário anterior.
http://fernandotellado.com/ Fernando Tellado

Si, olvidaste meterlas en un “code”
fede

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

gracias
http://fernandotellado.com/ Fernando Tellado

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.
http://guardafaro.net guardafaro

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.
http://guardafaro.net guardafaro

tales como: “”
http://guardafaro.net guardafaro

Intento de nuevo colocar el código: “”. Disculpen.
http://fernandotellado.com/ Fernando Tellado

Trata en insertarlo dentro de un code a ver si se ve
http://diariodebodas.es Keyla

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é?
http://diariodebodas.es Keyla

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…