您如何在以 div 为中心的无序列表中左对齐列表项？答案

【问题标题】：How can you left justify list items in a unordered list that is centered within a div?您如何在以 div 为中心的无序列表中左对齐列表项？
【发布时间】：2018-08-19 14:29:00
【问题描述】：

我在一个 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>

在我的样式表中，我有一个类将页面中的每个 div 居中，并将 div 中的内容居中：

div.center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

我希望我的无序列表在 div 中保持居中，但每个列表项在另一个下方对齐。我尝试过的所有内容都将列表项彼此居中。我错过了什么？

【问题讨论】：

对 li 使用 text-align:left 样式

标签： html css

【解决方案1】：

可能是，你想要这个。 SEE THE DEMO

要实现你想要的，你必须给你的 div 提供display: table;。

div.center {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

ul {
  text-align: left;
}

【讨论】：

【解决方案2】：

只需添加

ul {
  text-align: left;
}

【讨论】：

【解决方案3】：

您的列表似乎继承了text-align: center;，因此请尝试将div.listDiv 或div.listDiv ul 设置为text-align: left;。

我相信这应该可以解决您的问题

【讨论】：

【解决方案4】：

你试过了吗：

#listDiv.ul {
    text-align: left;
}

这将使包含在 ID 为 listDiv 的 div 中的任何 UL 中的文本左对齐。

如果您只输入以下内容：

ul {
    text-align: left;
}

然后您将在任何地方左对齐每个UL 的文本。

【讨论】：