Html CSS 设置 li 缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11445453/
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
CSS set li indent
提问by Georges Oates Larsen
Googling and searching stack overflow did not return any results that I could recognize, so forgive me if this has been asked before...
谷歌搜索和搜索堆栈溢出没有返回任何我能识别的结果，所以如果之前有人问过这个问题，请原谅我......
I have drop down main menu which uses lists as its basis. The problem is, the lists are very wide, and they do not indent far enough when expanded. So, this is my problem! How do I make the indent amount on lists larger via CSS?
我有使用列表作为基础的下拉主菜单。问题是，列表非常宽，展开时缩进不够。所以，这是我的问题！如何通过 CSS 使列表上的缩进量变大？
回答by gman
padding-leftis what controls the indentation of ulnot margin-left.
padding-left是控制ulnot的缩进margin-left。
Compare: Here's setting padding-leftto 0px, notice all the indentation disappears.
比较：这里设置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>and here's setting margin-leftto 0px. Notice the indentation does NOT change.
这里设置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>回答by DACrosby
to indent a uldropdown menu, use
要缩进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... */
You can indent the lis and (if applicable) the as (or whatever content elements you have) as well , each with differing effects.
You could also use padding-leftinstead of margin-left, again depending on the effect you want.
您也可以缩进lis 和（如果适用）as（或您拥有的任何内容元素），每个都有不同的效果。您也可以使用padding-left代替margin-left, 再次取决于您想要的效果。
Update
更新
By default, many browsers use padding-leftto set the initial indentation. If you want to get rid of that, set padding-left: 0px;
默认情况下，许多浏览器使用padding-left设置初始缩进。如果你想摆脱它，请设置padding-left: 0px;
Still, both margin-leftand padding-leftsettings impact the indentation of lists in different ways. Specifically:margin-leftimpacts the indentation on the outside of the element's border, whereas padding-leftaffects the spacing on the inside of the element's border. (Learn more about the CSS box model here)
尽管如此，margin-left和padding-left设置都以不同的方式影响列表的缩进。具体来说：margin-left影响元素边框外侧的缩进，而padding-left影响元素边框内侧的间距。（在此处了解有关 CSS 盒模型的更多信息）
Setting padding-left: 0;leaves the li's bullet icons hanging over the edge of the element's border (at least in Chrome), which may or may not be what you want.
设置padding-left: 0;使 li 的项目符号图标悬挂在元素边框的边缘（至少在 Chrome 中），这可能是您想要的，也可能不是。
Examples of padding-left vs margin-left and how they can work together on ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/
padding-left 与 margin-left 的示例以及它们如何在 ul 上协同工作：https: //jsfiddle.net/daCrosby/bb7kj8cr/1/
回答by Shankar Cabus
Also try:
还可以尝试：
ul {
list-style-position: inside;
}
回答by ricick
li{
margin-left:50px;
}
or replace 50px with whatever you want.
或者用你想要的任何东西替换 50px。
回答by Craig
I found that doing it in two relatively simple steps seemed to work quite well. The first css definition for ul sets the base indent that you want for the list as a whole. The second definition sets the indent value for each nested list item within it. In my case they are the same, but you can obviously pick whatever you want.
我发现用两个相对简单的步骤来做这件事似乎效果很好。ul 的第一个 css 定义设置了整个列表所需的基本缩进。第二个定义为其中的每个嵌套列表项设置缩进值。在我的情况下，它们是相同的，但您显然可以选择任何您想要的。
ul {
margin-left: 1.5em;
}
ul > ul {
margin-left: 1.5em;
}
