时间戳

首页 > 解决方案 > 如何将我所有的 li 对齐在一列上？

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-block 但不工作。我该如何解决？谢谢你。

标签： htmlcss

解决方案

要使整个列表居中，请切换text-align回leftin <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您可以根据您的样式删除，因为没有必要将列表居中。

推荐阅读