Clever Geek Handbook

How do I encode a nested ordered list in an unordered list item?

I want to nest an ordered list in one unordered list item so that the ordered list breaks up the text of the list item. For example:

• An unordered point, text text text ...
1. First ordered list item
2. Second ordered list item
... continuation of the text from the same unordered point.
• Another unordered point

I am wondering how to code this correctly? I tried:

<ul>
  <li>An unordered point, text text text...
  <ol>
    <li>First ordered list item</li>
    <li>Second ordered list item</li>
  </ol>
  ...continued text from same unordered point.</li>
  <li>Another unordered point</li>
</ul>

but not sure if this is the correct way to mark it up. Also, when I test this in Chrome and FF, the line spacing before and after the nested ordered list does not balance; I get:

• An unordered point, text text text ...
1. First ordered list item
2. Second ordered list item

... continuation of the text from the same unordered point.
• Another unordered point

+1


source to share


1 answer


This is the correct way, however you will need to play with the css to remove the fields in your nested list, which will fix the spacing issue.



+5


source






More articles:


All Articles