HTML/CSS 中嵌套列表的缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9473328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Indents in nested lists in HTML / CSS
提问by interstar
I've started using Twitter Bootstrap, which is useful for me (as a programmer) to get a decent looking site without having to write much CSS.
我已经开始使用 Twitter Bootstrap，它对我（作为一名程序员）非常有用，无需编写大量 CSS 即可获得一个外观漂亮的网站。
However something is driving me crazy. I have a nested list like
然而，有些事情让我发疯。我有一个嵌套列表，如
<ul>
<li>Hello</li>
<li>World
<ul>
<li>Wide</li>
<li>Web</li>
</ul>
</li>
</ul>
But the first and second level of this list are NOT getting indented differently (ie. they align with each other on the left)
但是这个列表的第一级和第二级没有以不同的方式缩进（即它们在左侧彼此对齐）
In normal html nested lists, deeper sublists indent more. But something in the style sheet must be turning this off. How do I find what controls this? I can't see a CSS "list indent" attribute for li elements in any documentation.
在普通的 html 嵌套列表中，更深的子列表缩进更多。但是样式表中的某些内容必须将其关闭。我如何找到控制它的东西？我在任何文档中都看不到 li 元素的 CSS“列表缩进”属性。
回答by paislee
Just use Firebugin FF or Chrome dev-tools: right-click on your target and select inspectelement. You can visually and textually inspect the CSS properties to see what's causing the collapse.
只需在 FF 或Chrome 开发工具中使用Firebug：右键单击您的目标和元素。您可以通过视觉和文本方式检查 CSS 属性以查看导致崩溃的原因。select inspect
You probably want a rule like
你可能想要这样的规则
ul > li {
margin-left: 10px;
}
回答by evophage
Just to add to the answers above: padding-leftwill indent the words, but not the bullet point, while margin-leftwill indent the bullet point as well.
只是为了添加上面的答案：padding-left将缩进单词，但不margin-left缩进项目符号，同时也会缩进项目符号。
Example: http://jsfiddle.net/GMLxv/
回答by fkoessler
I had the same problem as you.
我和你有同样的问题。
There's a rule in type.less that cancels the indentation for lists:
type.less 中有一个规则可以取消列表的缩进：
ul, ol {
padding: 0;
margin: 0 0 @baseLineHeight / 2 25px;
}
I ended up overriding this rule:
我最终覆盖了这条规则：
ul, ol {
padding: 0px 25px;
}
Indentation in nested lists is now back.
嵌套列表中的缩进现在又回来了。
回答by David Souther
You're looking to set padding-left:
您要设置padding-left：
li { padding-left: 1em; }
will indent every li 1em. Since the inner lis are already offset from the outer lis, it should do what you want.
将每 li 缩进 1em。由于内部 lis 已经从外部 lis 偏移，它应该做你想做的。
回答by Marius
Is it perhaps that you have set your bullets points to be inside the list items instead of before it, which would change your look quite significantly.
是否可能您已将项目符号点设置在列表项内而不是之前，这会显着改变您的外观。
The CSS to apply it: ul { list-style-position: inside; }
应用它的 CSS： ul { list-style-position: inside; }
Read more about list-style-position.
阅读更多关于list-style-position 的信息。
Example : https://jsfiddle.net/g0k0obwh/
回答by Dulith De Costa
Using Bootstrap you could do that by coding as follows. Just paste it your JSP or HTML and test it. You could go through this link for more information.
使用 Bootstrap，您可以通过如下编码来做到这一点。只需将其粘贴到您的 JSP 或 HTML 并对其进行测试。您可以通过此链接了解更多信息。
http://www.bootply.com/DglnYJTSKA
http://www.bootply.com/DglnYJTSKA
<div id="MainMenu">
<div class="list-group panel">
<a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a>
<div class="collapse" id="demo3">
<a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu1">
<a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a>
<a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a>
<a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
<a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a>
<a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a>
</div>
<a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a>
</div>
<a href="javascript:;" class="list-group-item">Subitem 2</a>
<a href="javascript:;" class="list-group-item">Subitem 3</a>
</div>
<a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a>
<div class="collapse" id="demo4">
<a href="" class="list-group-item">Subitem 1</a>
<a href="" class="list-group-item">Subitem 2</a>
<a href="" class="list-group-item">Subitem 3</a>
</div>
<a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a>
<div class="collapse" id="demo5">
<a href="#" class="list-group-item">Subitem 1</a>
<a href="" class="list-group-item">Subitem 2</a>
<a href="" class="list-group-item">Subitem 3</a>
</div>
</div>
</div>
CSS:
CSS：
.list-group.panel > .list-group-item {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.list-group-submenu {
margin-left:20px;
}
