HTML/CSS中嵌套列表中的缩进

Question

我已经开始使用Twitter Bootstrap,这对我(作为程序员)有用,可以获得一个体面的网站,而无需编写太多的CSS.

然而有些事情让我发疯.我有一个嵌套列表

<ul>
  <li>Hello</li>
  <li>World 
    <ul>
      <li>Wide</li>
      <li>Web</li>
    </ul>
  </li>
</ul>

但是这个列表的第一级和第二级不会缩进(即,它们在左侧彼此对齐)

在普通的html嵌套列表中,更深层次的子列表缩进更多.但样式表中的某些内容必须将其关闭.我如何找到控制它的内容？我无法在任何文档中看到li元素的CSS"list indent"属性.

Answer 1

只需在FF或Chrome开发工具中使用Firebug:右键单击目标和元素.您可以在视觉上和文本上检查CSS属性,以查看导致崩溃的原因.select inspect

你可能想要一个像这样的规则

ul > li {
    margin-left: 10px;
}

Answer 2

只是添加上面的答案:padding-left将缩进单词,但不margin-left缩进项目符号,同时也缩进项目符号.

示例:http://jsfiddle.net/GMLxv/

Answer 3

我遇到了和你一样的问题.

type.less中有一条规则可以取消列表的缩进:

ul, ol {
  padding: 0;
  margin: 0 0 @baseLineHeight / 2 25px;
}

我最终压倒了这个规则:

ul, ol {
  padding: 0px 25px;
}

嵌套列表中的缩进现在又回来了.

Answer 4

您要设置padding-left：

li { padding-left: 1em; }

将每 li 缩进 1em。由于内部 lis 已经从外部 lis 偏移，它应该做你想做的。

Answer 5

您不想将填充应用到li元素上，因为如果您使用项目符号列表，这会在项目符号和列表之间创建填充。看：

ul > li {
    padding-left:25px;
}

结果：

-    Hello
-    World 
    -    Wide
    -    Web

您也不想将其应用于父ul元素，这样ul { padding-left:25px;}会给出：

    - Hello 
    - World 
        - Wide
        - Web

你的问题的答案是：

li > ul {
    padding-left:25px;
}

结果：

- Hello
- World 
    - Wide
    - Web