How to code a nested ordered list within an unordered list item?

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

I see no problem with that. jsfiddle.net/YbntS I'm not sure what you mean by "not balanced out". — James Montagne
– James Montagne, Commented Jan 5, 2012 at 18:48
@JamesMontagne: I mean there's more line spacing beneath the ordered list than above it. I guess the problem will be corrected with CSS, as per Matt K's suggestion. But it's interesting that it renders without the spacing problem in JSFiddle. — yroc
– yroc, Commented Jan 5, 2012 at 18:54

Matt K · Accepted Answer · 2012-01-05 18:49:34Z

5

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.

answered Jan 5, 2012 at 18:49

Matt K

6,6883 gold badges41 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to code a nested ordered list within an unordered list item?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related