Question

I want to nest an ordered list within a single unordered list item, such that the ordered list splits 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

…continued text from same unordered point.

• Another unordered point

I’m wondering what’s the proper way to code this? I’ve 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 that’s the correct way to mark it up. Also, when I testing this in Chrome and FF, the line spacing before and after the nested ordered list does not balance out; I’m getting:

• An unordered point, text text text…

1. First ordered list item

2. Second ordered list item

…continued text from same unordered point.

• Another unordered point

Answer 1

This is the correct way, however you will need to play with the css to remove the margins on your nested list, which will fix your spacing problem.