CSS 设置缩进

Question

谷歌搜索和搜索堆栈溢出没有返回任何我能识别的结果，所以如果之前有人问过这个问题，请原谅我……

我有下拉主菜单，它使用列表作为基础。问题是，列表非常宽，展开时缩进不够远。所以，这是我的问题！如何通过 CSS 使列表的缩进量更大？

原文由 Georges Oates Larsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

缩进 ul 下拉菜单，使用

/* Main Level */
ul{
  margin-left:10px;
}

/* Second Level */
ul ul{
  margin-left:15px;
}

/* Third Level */
ul ul ul{
  margin-left:20px;
}

/* and so on... */

您也可以缩进 li s 和（如果适用） a s（或您拥有的任何内容元素），每个都有不同的效果。您也可以使用 padding-left 而不是 margin-left ，同样取决于您想要的效果。

更新

默认情况下，许多浏览器使用 padding-left 来设置初始缩进。如果你想摆脱它，设置 padding-left: 0px;

尽管如此， margin-left 和 padding-left 设置以不同的方式影响列表的缩进。 具体来说： margin-left 影响元素边框外侧的缩进，而 padding-left 影响元素边框内侧的间距。 （在这里了解更多关于 CSS 盒模型的信息）

设置 padding-left: 0; 使 li 的项目符号图标悬在元素边框的边缘（至少在 Chrome 中），这可能是您想要的，也可能不是您想要的。

padding-left 与 margin-left 的示例以及它们如何在 ul 上协同工作： https ://jsfiddle.net/daCrosby/bb7kj8cr/1/

原文由 DACrosby 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

padding-left 控制缩进的是 ul 而不是 margin-left 。

比较：此处将 padding-left 设置为 0 ，注意所有缩进都消失了。

 ul {
  padding-left: 0;
}

 <ul>
  <li>section a
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>
<ul>
  <li>section b
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>

这里设置 margin-left 为 0px 。注意缩进 没有改变。

 ul {
  margin-left: 0;
}

 <ul>
  <li>section a
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>
<ul>
  <li>section b
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>

原文由 gman 发布，翻译遵循 CC BY-SA 4.0 许可协议