HTML中的缩进列表

我想制作一个网页，并且遇到了一个probmem-Indenting列表。HTML中的缩进列表

这里是什么，我试图做一个例子：

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>

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

感谢您的帮助！ =）

来源

2015-04-06 airsickbachus3

正确方式做到这一点，相信它或不是，实际上是将有序列表放入“雌猫”<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>

来源

2015-04-06 03:20:48 Nathanael

，您可以给<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>

来源

2015-04-06 03:13:35 j08691

在你的CSS设置

ol{ 
    margin-left: 
}

到任何你想要的

来源

2015-04-06 03:13:38 sinanspd

HTML中的缩进列表

回答

相关问题