Question

我已经尝试了很长一段时间但没有得到第一个列表项的文本（它下降了几个像素）。它唯一的文字。 li-elem本身很好（因为当它悬停在li-elem上时它处于正确的位置）。

感谢您的帮助！

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;
}

Answer 1

这样的东西？

#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/ 编辑：如果你需要点，删除list-style-type：none，当然。问题在于默认边距和填充 - 由浏览器添加，对于ul元素，如果你正确设置（+行高），它应该可以正常工作。

第一个列表项的CSS文本不合适

1 个答案: