Menu
So, I have an ordered list that has an unordered list within it, like so:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>
<ul>
<li>Controls for single player mode:</li>
<li>
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:</li>
<li>
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Unfortunately, it outputs this:
I embedded the additional lis as otherwise it failed W3C validation. The Validator complained about sticking <ul> elements inside of <ol> elements otherwise.
How do I fix this so that the list symbols in front of the items will go away?
659
You can do this by using the type attribute in the <ol> tag. Let's explore how to order lists with alphabets and roman numbers. To mark the list items with letters A, B, C, etc., you will have to specify A as the type attribute's value in the <ol> tag.
Explanation: Unordered list is a list which is described in a bullet fashion where as ordered list are denoted in a numerical fashion. To insert/nest an unordered list inside an ordered list, you need to embed the unordered list inside the li tag which is already embedded inside the ordered list.
Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients) and an ordered list (the procedure): The ingredients: 100 g. flour.
Individual list items for ordered and unordered lists are noted by <li> tags. An ordered list is created using <ol> tags that stand for the overall ordered list, which then wrap around the rest of the individual <li> tags.
Just don't create a new li to embed your nested uls, but add them to the existing li. Like this:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game
<ul>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Since ordered and unordered lists are block-level elements in HTML, they will wrap to the next line by default, so there's even no need to create additional divs or insert line breaks.
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
