63

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

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

4

6 回答 6

78

padding-left是什么控制ulnot的缩进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>

于 2015-02-19T02:05:56.887 回答
70

要缩进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... */

您也可以缩进lis 和（如果适用）as（或您拥有的任何内容元素），每个都有不同的效果。您也可以使用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/

于 2012-07-12T05:32:58.763 回答
32

也试试：

ul {
  list-style-position: inside;
}
于 2013-09-21T15:10:36.540 回答
6 
li{
    margin-left:50px;
}

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

于 2012-07-12T05:27:20.083 回答
0

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

ul {
    margin-left: 1.5em;
}

ul > ul {
    margin-left: 1.5em;
}
于 2015-11-30T04:33:23.670 回答
0

使用 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 之前在另一个答案的评论中提到了这一点，但我第一次看时错过了这一点，所以我添加了这个答案。

于 2022-02-02T22:02:36.847 回答