Question

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

我有下拉主菜单，它以列表为基础。问题是，列表非常宽，并且在扩展时它们不会缩进得足够远。所以，这是我的问题！如何通过CSS使列表中的缩进量更大？

Answer 1

padding-left是控制ul缩进margin-left的原因。

比较：此处设置padding-left至0px，请注意所有缩进消失。

ul {
  padding-left: 0px;
}

<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: 0px;
}

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

Answer 2

缩进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和（如果适用）a s（或您拥有的任何内容元素），每个都有不同的效果。您也可以使用padding-left代替margin-left，这取决于您想要的效果。

<强>更新

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

但是，margin-left和padding-left设置都会以不同方式影响列表的缩进。 具体来说： margin-left会影响元素边框外部的缩进，而padding-left会影响元素边框内部的间距。 (Learn more about the CSS box model here)

设置padding-left: 0;会将li的子弹图标悬挂在元素边框的边缘（至少在Chrome中），这可能是您想要的，也可能不是。

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

Answer 3

还可以尝试：

ul {
  list-style-position: inside;
}

Answer 4

li{
    margin-left:50px;
}

或用你想要的任何东西替换50px。

Answer 5

我发现用两个相对简单的步骤做这件事看起来效果很好。 ul的第一个css定义为整个列表设置了所需的基本缩进。第二个定义为其中的每个嵌套列表项设置缩进值。在我的情况下，它们是相同的，但你显然可以选择你想要的任何东西。

ul {
    margin-left: 1.5em;
}

ul > ul {
    margin-left: 1.5em;
}

CSS设置li缩进

5 个答案: