無序列表左對齊，子彈與測試之間有巨大的空間

我以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

無序列表左對齊，子彈與測試之間有巨大的空間

回答

相關問題