li 및 p horzontal alignment

Question

현재 내가 직면 한 문제 중 하나는 부모에게 수평 중심에있는 내부 div가있는 flexbox (관련이 없어야 함)가 있다는 것입니다. 순서가 정렬되지 않은 목록을 내부 div의 텍스트와 나란히 정렬하고 싶지만 text-align : center를 사용하는 경우에도 픽셀 수가 오른쪽으로 약간 떨어져있는 것처럼 보입니다. 왜 그럴 수 있습니까? 나는 지금까지이 문제에 결코 빠지지 않았다고 믿는다.) '.right'div는 실제로 다른 요소의 자식이지만 관련성이 없어야하므로 실제로 필요한 부분을 게시합니다. 이것은 ul의 초기 스타일의 산물일까요?

.right { 
 
    text-align: center; 
 
    order: 2; 
 
    //background: yellow; 
 
    flex-basis: 100%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox{ 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list{ 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
} 
 

 
.headbox h3{ 
 
    color: orange; 
 
}

<div class="right"> 
 
    
 
    <div class="headbox"> 
 
    <h3>Visit Us</h3> 
 

 
    </div> 
 

 
    <div class="list"> 
 
    <ul> 
 
     <li>Overview</li> 
 
     <li>Hours</li> 
 
     <li>Admission</li> 
 
     <li>Directions</li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Answer 1

는 브라우저의 기본 스타일을 겹쳐 쓸 <ul>에 padding: 0를 추가합니다.

Answer 2

<ul>에는 여전히 브라우저의 기본 스타일 시트에서 기본 채우기가 있습니다.

padding-left: 0;을 사용하여 패딩을 비활성화 할 수 있습니다.

ul{ 
    list-style: none; 
    padding-left: 0; 
} 

.right { 
 
    text-align: center; 
 
    order: 2; 
 
    //background: yellow; 
 
    flex-basis: 100%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox{ 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list{ 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
.headbox h3{ 
 
    color: orange; 
 
}

<div class="right"> 
 

 
    <div class="headbox"> 
 
    <h3>Visit Us</h3> 
 

 
    </div> 
 

 
    <div class="list"> 
 
    <ul> 
 
     <li>Overview</li> 
 
     <li>Hours</li> 
 
     <li>Admission</li> 
 
     <li>Directions</li> 
 
    </ul> 
 
    </div> 
 

 
</div>