无序列表左对齐，子弹和测试之间有很大的空间

Question

我从CSS和jekyll / github-pages开始。我克隆了一些jekyll模板https://github.com/volny/stylish-portfolio-jekyll，我试图修改它的about.html文件，添加无序列表，如：

    <section id="about" class="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2>XXXXXX</h2>
              <ul>
                <li>aaaaaaa</li>
                <li>bbbbbbbbbb</li>
                <li>ccccccccc</li>
                <li>dddddddd</li>
              </ul>
          </div>
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>

但结果不如预期，子弹和文本之间存在巨大差距，子弹左对齐，文本居中。

我希望子弹位于文本旁边，左边有一些小填充。

要查看哪个文件？

Answer 1

将list-style-position：inside添加到ul元素中。 list-style-position属性的默认值在outside。

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

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

另一个给出不同结果的选项是将ul元素居中

.parent {
      text-align: center;
    }
.parent > ul {
      display: inline-block;
    }

<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>