CSS 设置 li 缩进

Question

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

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

Answer 1

问题的标题是“CSS set li indent”，但问题的内容是问其他问题“如何通过CSS使列表上的缩进量更大？”

对于标题“CSS set li indent”有多个相关问题。

设置

margin

不会直接影响“li缩进”。请注意，如果我们将边距设置为

0

，则没有任何变化！

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>

我们可以设置

padding-inline-start

。这可以处理从左到右和从右到左的文本。

ul {
  padding-inline-start: 0;
}

  <ul>
    <li>section a
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
  <ul dir="rtl">
    <li>section b
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>

padding-inline-start

也是问题内容的答案。想要 ident 更大吗？将

padding-inline-start

设置为更大的值。

回到将

padding-inline-start

设置为 0，您可以看到它在上面的示例中似乎有效，但这还不是结束。子弹仍然出现，只是出现在盒子外面。看这个例子

ul {
  padding-inline-start: 0;
}
#container {
  width: 70%;
  margin: 0 auto;
  background-color: orange;
}

<div id="container">
  <ul>
    <li>section a
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
  <ul dir="rtl">
    <li>section b
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
</div>

那么还剩下什么呢？您可以使用

list-style: none;

关闭项目符号点

ul {
  padding-inline-start: 0;
  list-style: none;
}
#container {
  width: 70%;
  margin: 0 auto;
  background-color: orange;
}

<div id="container">
  <ul>
    <li>section a
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
  <ul dir="rtl">
    <li>section b
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
</div>

您还可以使用

list-style-position: inside

将项目符号点移动到 li 的框中

ul {
  padding-inline-start: 0;
  list-style-position: inside;
}
#container {
  width: 70%;
  margin: 0 auto;
  background-color: orange;
}

<div id="container">
  <ul>
    <li>section a
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
  <ul dir="rtl">
    <li>section b
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
  </ul>
</div>

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

（或您拥有的任何内容元素），每个都有不同的效果。 您也可以使用

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/

Answer 3

也可以尝试：

ul {
  list-style-position: inside;
}

Answer 4

li{
    margin-left:50px;
}

或将 50px 替换为您想要的任何内容。

Answer 5

使用 chrome 开发工具并查看

ul

应用于

user agent stylesheet

元素的样式（在撰写本文时），Chrome 中的默认样式为：

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

padding-inline-start

属性用于设置项目符号（以及子列表的项目符号）的缩进。

padding-inline-start CSS 属性定义元素的逻辑内联起始填充，根据元素的书写模式、方向性和文本方向映射到物理填充。

（其他默认属性也可以帮助人们获得他们想要的外观）

请注意，@preferred_anon 之前在 另一个答案 的评论中提到了这一点，但我第一次查看时错过了这一点，所以我添加了这个答案。

Answer 6

我发现用两个相对简单的步骤来做似乎效果很好。 ul 的第一个 css 定义设置了整个列表所需的基本缩进。 第二个定义设置其中每个嵌套列表项的缩进值。就我而言，它们是相同的，但您显然可以选择您想要的任何内容。

ul {
    margin-left: 1.5em;
}

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