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.
17 comentarios en “Listas Espaciadas en tus entradas”
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.
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?
y otra cosa.. anda “lento” el tema este, gray beauty… tarda en actualizarse, no reacciona rapido a los cambios… alguna posible solucion?
[...] AYUDA WORDPRESS, encuentro un truco muy básico para construir listas con algo más de separación, en lugar de [...]
Como?
Porque não, em seu CSS, usar:
li {margin-bottom:1em}
Funciona. Sua solução (), no meu Firefox, não funcionou.
Abraços
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
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!
ps: as tags se perderam no comentário anterior.
Si, olvidaste meterlas en un “code”
fernando aun espero tu respuesta, mi principal inquietud es el porque de la tardanza al editar el etilo imageless_gray_beauty
gracias
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.
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.
tales como: “”
Intento de nuevo colocar el código: “”. Disculpen.
Trata en insertarlo dentro de un code a ver si se ve
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
nini 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é?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…
Escribe un Comentario
Si quieres aprender como hacer multitud de diseños distintos para WordPress no te pierdas esta estupenda recopilación de 26 tutoriales de diseño de blogs WordPress.
[#3]
Acaba de salir a la luz la nueva versión de WordPress para iPhone 1.3, con soporte completo para el firmware de iPhone 3.0. Va
de cojonesestupendamente. Altamente recomendable esta actualización, que tienes en iTunes.[#1]
Me avisa Kike Alonso de un nuevo plugin que permite que los comentarios que dejen tus amigos de Friendfeed al respecto de un post de tu sitio WordPress aparezcan también en tu post como comentarios normales, algo realmente interesante pues permite, con algunos clientes de escritorio e iPhone, comentar en blogs sin dejar de usar la aplicación de mensajería.
[#6]
Último mensaje de: eumendoza
En el foro: Plugins
Último mensaje de: xMeNux
En el foro: General WordPress.org
Último mensaje de: Anonymousy
En el foro: Instalación / Actualización
Último mensaje de: Merlyn
En el foro: Themes y Diseño
Último mensaje de: Merlyn
En el foro: General WordPress.org
Acceder