Html 如何在以 div 为中心的无序列表中左对齐列表项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22154140/
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
How can you left justify list items in a unordered list that is centered within a div?
提问by Lani1234
I have a div within a div within a div:
我在一个 div 中的一个 div 中有一个 div：
<div id="wrapper" class="center">
<div id="content" class="center">
<div id="listDiv" class="center">
<ul>
<li><a href='#' id="1" >Link one</a> </li>
<li><a href='#' id="2" >Link 2</a> </li>
<li><a href='#' id="3" >Link three</a> </li>
</ul>
</div>
</div>
</div>
In my style sheet, I have a class that centers each div within the page, and centers things within the div:
在我的样式表中，我有一个类将页面中的每个 div 居中，并将 div 中的内容居中：
div.center{
margin-left: auto;
margin-right: auto;
text-align: center;
}
I would like my unordered list to remain centered in the div, but for each list item to be left justified below the other. Everything I have tried centers the list items to each other. What am I missing?
我希望我的无序列表在 div 中保持居中，但每个列表项都要在另一个列表项下方对齐。我尝试过的所有内容都将列表项相互集中。我错过了什么？
回答by Dhiraj
May be, you want this. SEE THE DEMO
可能是，你想要这个。查看演示
To achieve what you want, you have to give display: table;to your div.
为了实现你想要的，你必须给display: table;你的 div。
div.center {
margin-left: auto;
margin-right: auto;
display: table;
}
ul {
text-align: left;
}
回答by Gareth
Just add
只需添加
ul {
text-align: left;
}
回答by MickelsonMichael
It looks like your list is inheriting the text-align: center;, so try setting the div.listDivor div.listDiv ulto text-align: left;.
看起来您的列表继承了text-align: center;，因此请尝试将div.listDiv或设置div.listDiv ul为text-align: left;。
I believe this should solve your problem
我相信这应该可以解决您的问题
回答by TylerH
Have you tried:
你有没有尝试过：
#listDiv.ul {
text-align: left;
}
This will left-align the text in any ULthat is contained within a div with ID of listDiv.
这将使ULID 为 的 div 中包含的任何文本左对齐listDiv。
If you just type the following:
如果您只输入以下内容：
ul {
text-align: left;
}
Then you will left-align the text of EVERY ULeverywhere.
然后您将左对齐每个UL地方的文本。
