왜 정렬되지 않은 목록 센터가 제대로 작동하지 않습니까?

겉으로보기에 중심에 놓으려고 시도하지만 실제로는 몇 픽셀 떨어져 있습니다. 정말 짜증나.왜 정렬되지 않은 목록 센터가 제대로 작동하지 않습니까?

내 코드 :

HTML :

<body> 
     <div class="menu-bar"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 

     <div class="greeting"></div> 
    </body>

CSS :

.menu-bar { 
    font-family: 'Lucida Grande'; 
} 

.menu-bar ul { 
    text-align: center; 
    list-style-type: none; 
} 

.menu-bar li { 
    display: inline; 
} 

.greeting { 
    background: url('../media/pic.jpg'); 
    border: 1px solid black; 
    margin-top: 75px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 500px; 
    height: 375px; 
}

매우 실망. > _ <

출처

2012-08-26 Doug Smith

어디서든 표준 reset.css 파일을 포함하고 있습니까? –

Margin 및 Padding 브라우저 불일치를 피하기 위해 css reset을 사용하지 않는 한 모두 0으로 설정해야합니다.

.menu-bar ul { 
    text-align: center; 
    list-style-type: none; 
    margin:0; 
    padding:0; 
}

출처

2012-08-26 22:16:36

정확히 내가 무엇을 찾고 있었습니까. CSS를 들여다 볼 시간도 재설정됩니다. 감사. :) –

당신은 환영합니다 :-) –

셰이크와 히라가 함께 던져진 것을 보지 않았습니다. 이름 +1. – Jawad

UL에는 다루지 않은 기본 왼쪽 여백이 있습니다. 그냥 마진을 추가하십시오 : 0;

출처

2012-08-26 22:07:08 TomDunning

왜 정렬되지 않은 목록 센터가 제대로 작동하지 않습니까?

답변

관련 문제