什么控制嵌套列表级别之间的水平空间？

Question

以下是三张相同代码的照片，说明了我的意思。如你所见，它们真的各不相同。

作为参考，代码是：

   <ul>
 <li>num 1</li>
  <ul>
   <li>num 1.1</li>
   <li>num 1.2</li>
   <ul>
    <li>3rd level</li>
   </ul>
  </ul>
 <li>num 2</li>
</ul>

我认为这可能是由于各种各样的事情，但问题并没有什么坏处。   1：

Answer 1

垂直空间通常通过CSS line-height来控制。例如，

li { line-height: 40px; }

您可能会发现this article很有用，其中列出了一些用于样式列表的常用CSS属性

修改

根据您编辑的问题，您可以使用margin-left控制水平间距。例如

<ul>
 <li>num 1
  <ul>
   <li>num 1.1</li>
   <li>num 1.2
    <ul>
     <li>3rd level</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>num 2</li>
</ul>

使用CSS

li ul li {  margin-left:100px; }

将向右列出深度为1或更多100px的列表。 Here's how that looks

Answer 2

在我看来你的HTML是错误的，你不能在ul里面有一个ul。正确的语法是：

<ul>
 <li>num 1
  <ul>
   <li>num 1.1</li>
   <li>num 1.2
    <ul>
     <li>3rd level</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>num 2</li>
</ul>

请注意，所有结束的li已经移动到该列表项的末尾（包括它的子项）。

使用css重置它应该在所有浏览器中显示相同的方式（或多或少......）。

Answer 3

我通常会关闭CSS中li，ul，ol的页边距填充和行高。我几乎可以肯定大多数浏览器使用边距来设置它，但是要确保我将它们全部设置为0。

ul, ol, li {
    padding: 0;
    margin: 0;
    line-height: 0;
}

Answer 4

取决于您希望如何添加间距。 您可以使用上/下边距或填充。在你的情况下，我会选择保证金：

li {
    margin: 5px 10px 5px 1em;
}

另外，请确保使用重置类来规范浏览器之间的差异。