Pregunta

Versión corta:

Cuando dos listas son adyacentes entre sí, hay una manera con CSS (o por algún otro medio) para evitar una nueva línea de ser añadido entre las dos listas?


Versión larga (con código):

Tengo HTML generado por máquina que no es inteligente manejando listas anidadas que los elementos <ol> mezcla y <ul>. (Si pensó que este es Oracle UCM dinámico Converter, usted gana el premio.)

En efecto, cuando los nidos de documentos de origen listas ordenadas y desordenadas, el HTML generado cierra todas las etiquetas la lista ordenada de nuevo al nivel superior, y comienza una nueva lista desordenada, el uso de múltiples etiquetas de lista no ordenada para conseguir el nivel deseado de indentación.

Dado que estos son elementos de bloque, navegadores muestran esto con un salto de línea no deseados entre las listas. Si tuviera un control directo sobre el HTML, esto sería fácil, pero por desgracia. Creo que CSS es factible, pero mi relación dedal de CSS conocimiento me está fallando. (El uso simplista de style="display: inline;" con los elementos <ul> no funcionaba para mí.)

abstraído, estoy consiguiendo:

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 
</ol></ol>

<ul><ul><ul><li>bullet, indent level3<li> 
            <li>bullet, indent level3<li>
</ul></ul></ul>

Con suerte, hay una manera de hacer que la versión procesada de esta manera:

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 

<ul><li>bullet, indent level3<li> 
    <li>bullet, indent level3<li>
</ul></ol></ol>

Estoy esperando que esto es un poco fácil de CSS.

Gracias!

¿Fue útil?

Solución

Si el problema sólo es visible la línea en blanco entre las listas, ¿qué hay de simplemente:

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top