HTML 中的缩进列表

Question

我正在尝试制作一个网页，但遇到了一个问题——缩进列表。

这是我正在尝试做的一个例子：

但我不太明白如何缩进编号列表。使用我的代码，这就是它的样子

<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>

代码继续，但我需要先解决这个问题

感谢您的帮助！ =)

Answer 1

你可以给<ol>一个左边距：

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>

Answer 2

在您的 CSS 中设置

 ol{
     margin-left:
 }

随心所欲

Answer 3

不管你信不信，正确的做法是将有序列表实际放在 "Female Cats" <li> 中。这是实现这一点的最语义方式，因为它告诉浏览器和网络爬虫（例如 Google）第二个列表实际上是父列表的 child。这对于搜索索引等非常重要。

以下是您应该如何操作。如果你想要列表之间额外的垂直 space，fiddle 与有序列表的 CSS 周围。

<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>

HTML 中的缩进列表

Indenting lists in HTML

html

list

indentation