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!