Html 如何在以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>

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

只需添加

ul {
  text-align: left;
}

---

看起来您的列表继承了

文本对齐：居中

，因此尝试将

div.listDiv

或

div.listDiv ul

设置为

文本对齐：左

我相信这会解决你的问题
也许，你想要这个

要实现您想要的，您必须给出
display:table到您的div

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

ul {
  text-align: left;
}

您是否尝试过：

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

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

如果您只需键入以下内容：

ul {
    text-align: left;
}

然后将每个
UL
的文本左对齐到所有位置。
使用文本对齐：左样式作为li的文本
ul {
    text-align: left;
}