2009-12-15 6 views
0

일부 CSS에 문제가 있습니다. 이 내 HTML여백 넘침 문제

<body> 
<div id="cn"> 
    <div id="hd"> 
     <ul> 
      <some li's> 
     </ul> 
    </div><!-- /#hd --> 
    <div id="bd"> 
    </div><!-- /#bd --> 
    <div id="ft"> 
    </div><!-- /#ft --> 
</div><!-- /#cn --> 

하고 내 CSS가 :

div#cn { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    background: #f7f7f7; 
} 

div#cn > * { 
    position: relative; 
} 

div#cn div#hd { 
    height: 258px; 
    background: #f7f7f7 url(../img/hd.jpg); 
} 

div#cn div#hd ul { 
    margin: 50px 0 0 0; 
    padding: 0; 
    list-style-type: none; 
} 

div#cn div#hd ul li { 
    float: left; 
} 

div#cn div#hd ul li a { 
    display: block; 
    height: 35px; 
    padding: 20px 25px 0 25px; 
    font-weight: bold; 
    background: pink url(../img/nava.jpg) right 0 no-repeat; 
} 

지금 여백 파이어 폭스에서 UL하지만 사업부 그것 (#HD)의 주위에 영향을 미치지 않는됩니다. 그 것처럼 나는 #hd에 여백을 가지고 있었고 ul에는 없었습니다 ... #hd로 테두리를 설정하면 이상하게되었습니다! (또는 UL이 작동하기 전에 nbsp를 찾습니다.)

얼마나 이상합니까? 그리고 누군가가 왜 이런 일이 일어나는 지, 어떻게 제대로 해결할 수 있는지 말해 줄 수 있습니까? (작동하도록 테두리를 설정하고 싶지 않습니다. P)

답변

0

난 그냥 비슷한 문제가 건너, 단순히 부모 요소에 약간의 패딩을 추가하여 해결했습니다. 링크 .inline 블록에 대한

div#cn div#hd{ padding: 1px 0; margin: -1px 0; }