Question

我正在尝试创建一个网页，但我遇到了一个问题 - 缩进列表。

这是我想要做的一个例子：

Final product

但我无法弄清楚如何缩进编号列表。使用我的代码，这就是它的样子

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>

代码仍在继续，但我需要首先解决此问题

感谢您的帮助！ =）

Answer 1

无论信不信，执行此操作的正确方法是将有序列表实际放入＆＃34; Female Cats＆＃34; <li>。这是实现此目的的最语义方式，因为它告诉浏览器和网络抓取工具（例如Google）第二个列表实际上是父列表的子。这对于搜索索引等很重要。

这是你应该怎么做的。如果您希望列表之间有额外的垂直空间，请使用有序列表的CSS。

＆＃13;

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

＆＃13;

Answer 2

您可以为<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 3

在CSS中设置

 ol{
     margin-left:
 }

到你想要的任何东西

在HTML中缩进列表

3 个答案: