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

我以CSS和jekyll/github-pages开始。我克隆一些杰基尔模板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>

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

我想子弹被旁边的文本，并在左侧一些小的填充。

要查看哪个文件？

来源

2017-03-15 Marian Paździoch

包括你的CSS在后请。看看如何创建一个[mcve] –

会做，但哪一个？ –

哪一个是什么？给我们一个[mcve]。我们不必去github，找到你的CSS，并提取相关的部分，只是为了从一小块html中重现这个布局。 –

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

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

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

另一种选择，让不同的结果是居中的UI元素

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

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

来源

2017-03-15 21:52:52 hjcoder18

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

回答

相关问题