정렬되지 않은 목록은 왼쪽으로 정렬되고 글 머리 기호와 테스트 사이에 큰 공간이 있습니다.

Question

저는 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> 

, 글 머리 기호와 텍스트 사이의 큰 간격이, 글 머리 기호는 왼쪽 정렬되고 텍스트는 중앙에 배치됩니다.

총알이 텍스트 옆에 왼쪽에 작은 약간의 패딩과 함께하고 싶습니다.

어떤 파일을보아야합니까?

Answer 1

목록 스타일 위치를 ul 요소에 추가합니다. list-style-position 등록 정보의 기본값이 밖에 있습니다.

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

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</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>