Question

我在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的中心位置，但是每个列表项都要左对齐。我尝试过的所有内容都将列表项相互对齐。我错过了什么？

Answer 1

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

要实现您的目标，您必须将display: table;提供给您的div。

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

ul {
  text-align: left;
}

Answer 2

添加

ul {
  text-align: left;
}

Answer 3

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

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

Answer 4

你试过了吗？

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

这会左对齐ID UL 的div中包含的任何listDiv中的文字。

如果您只输入以下内容：

ul {
    text-align: left;
}

然后，您将左对齐每个UL的文本。

你如何在一个以div为中心的无序列表中保留对齐列表项？

4 个答案: