Question

我有一个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个代表才能发布图片。谢谢你的帮助。

Answer 1

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

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

<style>

ol, ul {
    margin-top: 0;
}

</style>

这会解决您的问题吗？

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

1 个答案: