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

【问题标题】：What controls horizontal space between levels of nested list?什么控制嵌套列表级别之间的水平空间？
【发布时间】：2015-09-23 02:14:56
【问题描述】：

这是相同代码的三张照片，说明了我的意思。如您所见，它们确实各不相同。

代码供参考：

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

【问题讨论】：

标签： html css

【解决方案1】：

在我看来你的 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 重置它应该在所有浏览器中以相同的方式显示（或多或少...）。

【讨论】：

【解决方案2】：

垂直空间通常通过 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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

还要确保使用重置类来规范浏览器之间的差异。

【讨论】：