CODEWITHSUNDEEP
htmllist
John Doe
John Doe

Reputation: 55

Nested ordered list within <dd> element [HTML5]

I have an HTML5 nested list assignment where we have to produce this output:

https://gyazo.com/b9f77a413c0c0e55aaa294ed5b3c346a

In order for the ordered list under the first term to appear the way it does in his example, I decided to nest the list under the <dd> element. Any other way I try does not work.

However it produces this result when I try to code it:

https://gyazo.com/06ecff49a788d4f18bc451a5195571c3

This is my code:

<!DOCTYPE html/>
<html>
    <head>
        <title>Question One</title>
        <h1>Exercise on HTML5 Lists</h1>
    </head>
    <body>
        <dl>
            <dt>term 1 (definition list)</dt>
            <dd>
                term 1 description
                <ol>
                    <li>ol list item 1</li>
                    <li>ol list item 2</li>
                    <ul>
                        <li>ul list item 1</li>
                        <li>ul list item 2</li>
                    </ul>
                </ol>   
            </dd>   
        </dl>
        <dl>
            <dt>term 2 (definition list)</dt>
            <dd>
                term 2 description
                <ul>
                    <li>ul list item 3</li>
                    <li>ul list item 4</li>
                        <ol>
                            <li>ol list item 3</li>
                            <li>ol list item 4</li>
                        </ol>
                    <li>ul list item 5</li>
                    <li>ul list item 6</li>
                </ul>
            </dd>
        </dl>
    </body> 
</html>

Sorry about the links to images instead of images themselves, i'm a noob and need 10 rep to post images. Thank you for your help.

Upvotes: 0

Views: 1462

Answers (1)

taylorsabell
taylorsabell

Reputation: 724

You didn't really describe what the issue is, but the only difference I can see between the two pictures is the spacing and font. I'm assuming the issue is spacing.

Add the following block to your HTML file.

<style>

ol, ul {
    margin-top: 0;
}

</style>

Does this solve your problem?

Upvotes: 1

Related Questions