CODEWITHSUNDEEP
htmllistindentation
sarora
sarora

Reputation: 522

Indenting lists in HTML

I am trying to make a webpage and I came across a probmem–Indenting a list.

Here is an example of what I am trying to do:

Final product

But I cant quite figure out how to indent the numbered list. Using my code, this is what it looks like

What My image looks like

<html>
<head>
    <title>Top Five Cat & Dog Names</title>
</head>
<body>
    <h1>Top Five Cat & Dog Names</h1>
    <h2>Top Five Cat Names</h2>
    <ul>
        <li>Female Cats</li>
    </ul>
        <ol>
            <li>Tigger</li>
            <li>Tiger</li>
            <li>Smokey</li>
            <li>Kitty</li>
            <li>Sassy</li>
        </ol>
    <ul>
</body>

the code continues, but I need to get this issue resolved first

Thanks for any help! =)

Upvotes: 5

Views: 18875

Answers (3)

Nathanael
Nathanael

Reputation: 7173

The correct way to do this, believe it or not, is to actually put the ordered list inside the "Female Cats" <li>. This is the most semantic way to achieve this, as it tells browsers and web crawlers (such as Google) that the second list is actually a child of the parent list. This is important for search indexing, among other things.

Here is how you should do it. If you want extra vertical space between the lists, fiddle around with the CSS of the ordered list.

<h1>Top Five Cat &amp; Dog Names</h1>
<h2>Top Five Cat Names</h2>
<ul>
    <li>Female Cats
        <ol>
            <li>Tigger</li>
            <li>Tiger</li>
            <li>Smokey</li>
            <li>Kitty</li>
            <li>Sassy</li>
        </ol>
    </li>
    <li>Male Cats
        <ol>
            <li>Figaro</li>
            <li>Tom</li>
            <li>Ahkmenrah</li>
        </ol>
    </li>
</ul>

Upvotes: 13

sinanspd
sinanspd

Reputation: 2734

In your CSS set the 

 ol{
     margin-left:
 }

to whatever you want

Upvotes: 1

j08691
j08691

Reputation: 207900

You can give the <ol> a left margin:

ol {
    margin-left:40px;
}
 <h1>Top Five Cat & Dog Names</h1>

 <h2>Top Five Cat Names</h2>

<ul>
    <li>Female Cats</li>
</ul>
<ol>
    <li>Tigger</li>
    <li>Tiger</li>
    <li>Smokey</li>
    <li>Kitty</li>
    <li>Sassy</li>
</ol>
<ul>

Upvotes: 1

Related Questions