크롬의 CSS 레이아웃 문제

Question

부트 스트랩 반응 레이아웃을 사용하며 Chrome 브라우저 (버전 28)를 제외하고 Firefox, Opera, IE에서 정렬되지 않은 목록이 잘 보입니다. 크롬에서는 그림에 다음과 같습니다

이

ul { 
    margin: 20px; 

    li { 
     border-bottom: 1px solid #E6E6E6; 

     div {        // the icon 
      color: #0085AF; 
      display: inline-block; 
      font-size: 12px; 
      width: 10%; 
     } 

     p {        // the text 
     display: inline-block; 
     float: right; 
     margin-bottom: 0; 
     width: 89%; 

     a { 
      font-family: 'Open Sans',sans-serif; 
      margin-left: 10px; 
     } 
     } 
    } 
} 

UL 리튬의 리셋 스타일은 다음과 같습니다 : 여기

는 CSS 스타일링이다 내가 알아낼 수

ul, li { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
} 

하는 설정은 현재 레이아웃을 깨지 않고 변경해야하며, 텍스트는 아이콘과 경계선 위에 있어야하며, 테두리 선 위에 있지 않아야합니다. 왜 이러는거야?

Answer 1

사용 display: block;보다는 display: inline-block;