Evitare nuova linea tra elenchi HTML adiacenti?
-
09-10-2019 - |
Domanda
Versione corta:
Quando due liste sono adiacenti l'uno all'altro, c'è un modo con i CSS (o con altri mezzi) per evitare una nuova linea di essere aggiunto tra i due elenchi?
Versione lunga (con codice):
Ho generato macchina HTML che non è intelligente gestisce liste nidificate che gli elementi <ol>
mix e <ul>
. (Se avete indovinato che si tratta di Oracle UCM dinamico Converter, si vince il premio.)
In particolare, quando i nidi documento di origine liste ordinate e non, l'HTML generato chiude tutti i tag the-lista ordinata di nuovo al livello superiore, e comincia una nuova lista non ordinata, utilizzando più tag non ordinata-list per ottenere il livello desiderato di indentazione.
Dato che questi sono elementi di blocco, i browser rendono questo con un ritorno a capo indesiderato tra le liste. Se ho avuto un controllo diretto sul codice HTML, questo sarebbe facile, ma ahimè. Credo che CSS è fattibile, ma il mio parente ditale di conoscenza CSS mi sta venendo a mancare. (Uso Naive di style="display: inline;"
con gli elementi <ul>
non ha funzionato per me.)
Astratto, sto ottenendo:
<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>
Si spera, c'è un modo per rendere la versione resa in questo modo:
<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>
Spero che questo è un po 'facile di CSS.
Grazie!
Soluzione
Se il problema unico visibile è la riga vuota tra le liste, come su semplicemente:
ol, ul {
margin-top: 0;
margin-bottom: 0;
}