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

Question

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-block但没有用。我该如何解决？谢谢。

Answer 1

要使整个列表居中，请将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，因为不必将列表居中。

Answer 2

我使用了flexbox。 display: flex; justify-content: center确保孩子在垂直方向上居中对齐。

如果您是Flexbox的新手，我建议this guide。

您可以详细了解text-align的工作原理here。

摘要

.test {
  display: flex;
  justify-content: center;
}

.test ul {
  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>

Answer 3

尝试一下

删除text-align: center;的工作

.test {
  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>

Answer 4

像这样

.test {
  list-style-position: inside;

}

.test ul{
display:table; 
margin:0 auto;
}

<div class="test">

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

</div>

Answer 5

使用display:flex;      justify-content: center;而非text-align: center;，并使用:before将点更改为*

.test li {
  position: relative;
  list-style: none;
}

.test li:before {
  content: "*";
  position: absolute;
  left: -13px;
  top: 4px;
}

.test {
  display: flex;
  justify-content: center;
}

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