<dd> 元素 [HTML5] 中的嵌套有序列表

我有一个HTML5嵌套列表赋值，我们必须在其中生成以下输出：

https://gyazo.com/b9f77a413c0c0e55aaa294ed5b3c346a

为了使第一个术语下的有序列表像在他的示例中一样显示，我决定将列表嵌套在 <dd> 元素下。我尝试的任何其他方法都不起作用。

但是，当我尝试编码时，它会产生以下结果：

https://gyazo.com/06ecff49a788d4f18bc451a5195571c3

这是我的代码：

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

很抱歉链接到图像而不是图像本身，我是一个菜鸟，需要 10 次才能发布图像。谢谢你的帮助。

你并没有真正描述问题是什么，但我可以看到两张图片之间唯一的区别是间距和字体。我假设问题是间距。

将以下块添加到您的 HTML 文件中。

<style>
ol, ul {
    margin-top: 0;
}
</style>

这能解决你的问题吗？

相关内容

最新更新

热门标签：