I have an ordered list with this css:
list-style-position: inside;
padding-left: inherit;
that also contains nested ordered lists.
<li>a</li>
<li>b</li>
<li>
<ol>
<li>
<ol>
<li>i</li>
<li>ii</li>
</ol>
</li>
<li>d</li>
<li>e</li>
<ol>
<li>iii</li>
<li>iv</li>
<li>v</li>
<li>vi</li>
</ol>
</li>
</ol>
</li>
<li>f</li>
</ol>
Each list item (that doesn't contain an OL) looks like this:
<img src="test.jpg">
<p style="margin: 0px; text-align: center;">Desc</p>
</li>
and has this (simplified) CSS that puts a number at the top:
li::before {
counter-increment: slide;
content: counter(slide);
}
The list items typically display as a series running down the page. I
now need a way to display the items horizontally with the nested list
items running vertically eg.
a---b---i---d---e---iii---f
--------ii----------iv-----
--------------------v------
--------------------vi-----
The list can scroll horizontally and vertically as necessary.
I thought I could simply set the display of each OL to flex but the last
item 'f' ends up next to 'b' instead of after "iii - vi".
How can I solve this?
Andrew Poulos
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)