html - 如何将我所有的li对齐在一个列上？

https://jsfiddle.net/cg578trx/10/

.test {
  text-align: center;
  list-style-position: inside;
}

<div class="test">

  <ul>
    <li>a</li>
    <li>aa</li>
    <li>aaa</li>
    <li>aaaa</li>
    <li>aaaaa</li>
  </ul>

</div>

Output
       * a
      * aaa
     * aaaaa
    * aaaaaaa
   * aaaaaaaaa

Desired Output

       * a
       * aaa
       * aaaaa
       * aaaaaaa
       * aaaaaaaaa

我想在一列中对齐所有li项。我使用了display:inline块，但不起作用。我该怎么解决？谢谢您。

最佳答案

要使整个列表居中，请在text-align中将left切换回<ul>中的display: inline-block，并使其在整个<div>中居中。

.test {
  text-align:center;
}

.test > ul {
  text-align: left;
  list-style-position: inside;
  display: inline-block;
}

<div class="test">
  <ul>
    <li>a</li>
    <li>aaa</li>
    <li>aaaaa</li>
    <li>aaaaaaa</li>
    <li>aaaaaaaaa</li>
  </ul>
</div>

您可以根据您的样式删除list-style-position: inside，因为不需要将列表居中。

关于html - 如何将我所有的li对齐在一个列上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51173499/