gpt4 book ai didi

html - 在 HTML 中缩进列表

转载 作者:太空宇宙 更新时间:2023-11-04 14:34:25 31 4
gpt4 key购买 nike

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

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

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>

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

感谢您的帮助! =)

最佳答案

不管你信不信,正确的做法是将有序列表实际放入“母猫”<li> .这是实现此目的的最语义方式,因为它告诉浏览器和网络爬虫(例如 Google)第二个列表实际上是父列表的。这对于搜索索引等非常重要。

这是您应该如何做的。如果您希望列表之间有额外的垂直空间,请修改有序列表的 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 - 在 HTML 中缩进列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29464815/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com