HTML 和 CSS 中的缩进列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6985755/
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
Indent List in HTML and CSS
提问by Alan
I'm new to CSS and working with list. I tried using one of the code I saw on w3schools which shows how to indent lists:
我是 CSS 的新手，正在使用列表。我尝试使用我在 w3schools 上看到的代码之一，该代码显示了如何缩进列表：
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
My css is overriding it so it all apears on the same vertical line. Is there any CSS code I could use locally on the list to override the main css file? Any help would be appreciated.
我的 css 覆盖了它，所以它都出现在同一条垂直线上。我可以在列表中本地使用任何 CSS 代码来覆盖主 css 文件吗？任何帮助，将不胜感激。
回答by Madara's Ghost
Yes, simply use something like:
是的，只需使用以下内容：
ul {
padding-left: 10px;
}
And it will bump each successive ulby 10 pixels.
并且它将每个连续ul增加 10 个像素。
回答by Jason Gennaro
It sounds like some of your styles are being reset.
听起来您的某些样式正在重置。
By default in most browsers, uls and ols have marginand paddingadded to them.
默认情况下，在大多数浏览器中，uls 和ols 已添加margin并padding添加到其中。
You can override this (and many do) by adding a line to your css like so
你可以通过在你的 css 中添加一行来覆盖这个（很多人都这样做）
ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST
margin:0;
padding:0;
}
In this case, you would remove the element from this list or add a margin/paddingback, like so
在这种情况下，您将从该列表中删除该元素或添加一个margin/ paddingback，就像这样
ul{
margin:1em;
}
回答by Maria Berinde-Tampanariu
I solved the same problem by adding text-indent to the nested list.
我通过向嵌套列表添加文本缩进解决了同样的问题。
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul id="list2">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
#list2
{
text-indent:50px;
}
回答by sk8forether
You can also use html to override the css locally. I was having a similar issue and this worked for me:
您还可以使用 html 在本地覆盖 css。我遇到了类似的问题，这对我有用：
<html>
<body>
<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
回答by Metafaniel
You can use [Adjacent sibling combinators] as described in the W3 CSS Selectors Recommendation1So you can use a +sign (or even a ~tilde) apply a padding to the nested ultag, as you described in your question and you'll get the result you need.
I also think what you want it to override the main css, locally.
You can do this:
您可以使用 W3 CSS 选择器建议1中所述的 [相邻同级组合器]
因此，您可以使用+符号（甚至~波浪号）将填充应用于嵌套ul标签，如您在问题中所述，您将得到结果你需要。我还认为您希望它在本地覆盖主 css。你可以这样做：
<style>
li+ul {padding-left: 20px;}
</style>
This way the inner ulwill be nested including the bullets of the lielements.
I wish this was helpful! =)
这样，内部ul将嵌套，包括li元素的项目符号。我希望这是有帮助的！=)
回答by Kalle H. V?ravas
Normally, all lists are being displayed vertically anyways. So do you want to display it horizontally?
通常，所有列表都是垂直显示的。那么你想水平显示它吗？
Anyways, you asked to override the main css file and set some css locally. You cannot do it inside <ul>with style="", that it would apply on the children (<li>).
无论如何，您要求覆盖主 css 文件并在本地设置一些 css。你不能在里面<ul>用来做style=""，它会适用于孩子 ( <li>)。
Closest thing to locally manipulating your list would be:
最接近本地操作您的列表的是：
<style>
li {display: inline-block;}
</style>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
