2014-03-02 2 views
0

나는 꽤 오랫동안 노력했지만 첫 번째 목록 항목의 텍스트를 제자리에 가져 오지 않았습니다 (몇 픽셀 아래에 있음). 그 텍스트 만. li-elem 자체는 괜찮습니다 (li-elem 위로 마우스를 올리면 올바른 위치에 있음). 도움을첫 번째 목록 항목의 CSS 텍스트가 부적절합니다.

http://jsfiddle.net/picbig/9W3Gu/1/

감사합니다!

HTML :

<div id="lang_cnt"> 
<div id="lang_head_left">Languages</div><span id="lang_head_right">▼</span> 
<div id="lang_body_cnt"> 
    <ul> 
     <li>English</li> 
     <li>Deutsch</li> 
     <li>Italiano</li> 
     <li>Français</li> 
     <li>Español</li> 
     <li>Português</li> 
     <li>русский</li> 
     <li>日本</li> 
     <li>日本人</li> 
    </ul> 
</div> 
</div> 

CSS :이 같은

#lang_cnt{ 
    width: 100px; 
    height: 22px; 
    float: right; 
    background: #2b627f; 
    border: 1px solid white; 
    color: white; 
    cursor: pointer; 
} 
#lang_head_left{ 
    width: 65px; 
    position: relative; 
    float: left; 
    padding: 2px 5px; 
    font-size: 0.8em;  
} 
#lang_head_right{ 
    width: 15px; 
    float: right; 
    padding: 2px 8px 2px 0; 
} 
#lang_body_cnt{ 
    position: relative; 
    top: 32px; 
    border: 1px solid white; 
} 
#lang_body_cnt ul{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 
#lang_body_cnt ul li{ 
    height: 10px; 
    padding: 3px 0 5px 3px; 
    color: #2b627f; 
    cursor: pointer; 
    font-size: 0.8em; 
} 
#lang_body_cnt li:nth-child(even){ 
    background: #2b627f; 
    color: white; 
} 
#lang_body_cnt li:hover{ 
    background: lightgrey; 
    color: white; 
} 
+0

크롬을 사용하고 계십니까? – anurupr

+0

li에 선 높이를 추가하려고 했습니까? – sinisake

답변

2

뭔가?

#lang_body_cnt{ 
    position: relative; 

    border: 1px solid white; 
} 
#lang_body_cnt ul{ 
    list-style-type:none; 
    margin:0; 
    padding:35px 0 0 0; 

} 
#lang_body_cnt ul li{ 
    height: 10px; 
    padding: 3px 0 5px 3px; 
    color: #2b627f; 
    cursor: pointer; 
    font-size: 0.8em; 
    line-height:10px; 
    margin:0; 
} 

JSfiddle는 : http://jsfiddle.net/9W3Gu/7/ 편집 : 당신이 점을 필요로하는 경우, 목록 - 스타일 유형을 제거 : 없음, 물론. 문제는 기본 여백과 패딩에 있었고, 브라우저에 의해 ul 요소에 추가되었습니다. 제대로 설정하면 (+ 행 높이) 제대로 작동합니다.

+0

좋은 감사합니다. – Hobby99

관련 문제