Question

Short version:

When two lists are adjacent to each other, is there a way with CSS (or by some other means) to prevent a new line from being added between the two lists?

---

Long version (with code):

I have machine-generated HTML that is not intelligently handling nested lists that mix <ol> and <ul> elements. (If you guessed that this is Oracle UCM Dynamic Converter, you win the prize.)

Specifically, when the source document nests ordered and unordered lists, the generated HTML closes all the ordered-list tags back to the top level, and begins a new unordered list, using multiple unordered-list tags to get the desired level of indentation.

Since these are block elements, browsers render this with an unwanted newline between the lists. If I had direct control over the HTML, this would be easy, but alas. I believe that CSS is do-able, but my relative thimbleful of CSS knowledge is failing me. (Naive use of style="display: inline;" with the <ul> elements didn’t work for me.)

Abstracted, I am getting:

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

Hopefully, there is a way to make it the rendered version like this:

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

I’m hoping this is an easy bit of CSS.

Thanks!

Answer 1

If the only visible issue is the blank line between the lists, how about simply:

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}