Indenting lists in HTML

html list indentation

10,190

Solution 1

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>

Solution 2

In your CSS set the

 ol{
     margin-left:
 }

to whatever you want

Solution 3

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>

10,190

Author by

sarora

Updated on June 04, 2022

Comments

sarora almost 2 years

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! =)