정렬되지 않은 목록의 CSS 높이를 설정 하시겠습니까?

Question

여기에 내 페이지의 바닥 글에 대한 목록이 있는데, 수평으로 표시하고 싶습니다.

하지만 인라인 목록으로 바꾸어 가로로 이동했기 때문에 배경 이미지가 세로로 잘립니다. 가장 큰 것은 27px입니다.

저는 막혔습니다. 왜 다음과 같은 일을하는지 압니다. 그러나 나는 그것의 주위에 어떻게 얻는가? 당신이 볼 수 있듯이, 이미지의 절반이 차단되어

:

여기

#footer ul { 
    height: 27px; 
} 

#footer ul li { 
    display: inline; 
    list-style: none; 
    margin-right: 20px; 
} 

#footer-tmdb { 
    background: url('../images/logo-tmdb.png') no-repeat 0 0; 
    padding-left: 140px; 
} 

#footer-email { 
    background: url('../images/icon-email.png') no-repeat 0 3px; 
    padding-left: 40px; 
} 

#footer-twitter { 
    background: url('../images/icon-twitter.png') no-repeat 0 0; 
    padding-left: 49px; 
} 

는 것 같습니다 무엇 :

<div id="footer"> 
    <ul> 
     <li id="footer-tmdb"><a href="">Film data courtesy of TMDB</a></li> 
     <li id="footer-email"><a href="">Contact Us</a></li> 
     <li id="footer-twitter"><a href="">Follow Us</a></li> 
    </ul> 
</div> 

와 CSS : 여기

는 HTML의 .

해결책이 간단할수록 좋습니다.

Answer 1

#footer ul li { 
    display: block; 
    float: left; 
    height: 27px; 
    list-style: none; 
    margin-right: 20px; 
} 

Answer 2

이 시도 :

#footer ul { 
    overflow: auto 
} 

#footer ul li { 
    display: block; 
    list-style: none; 
    margin-right: 20px; 
    float: left; 
} 

Answer 3

사용 inline-block

#footer li { 
    height: 27px; 
    display: inline-block; 
} 

Answer 4

보십시오이 :

UL의 #footer

#footer li, 
#footer ul { 
    height: 27px; 
}