小编hod*_*rgh的帖子

我目前正试图围绕一个问题包围我的大脑,但我似乎无法掌握它.

在导航的无序列表中,我想在伪类之前通过css在每个列表项之前添加一个图标.

<ul class="list">
    <li class="list-item"><a href="#">one</a></li>
    <li class="list-item"><a href="#">two</a></li>
    <li class="list-item"><a href="#">three</a></li>
    <li class="list-item"><a href="#">four</a></li>
</ul>?

我的第一个想法是给两个元素(图标和标签)显示:内联块并将图标与vertical-align:middle对齐.只需很少的调整(margin-bottom),这在chrome中效果很好:

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}

.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0.125em 5px;
}

.list-item a {
    display: inline-block;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

但是当你在firefox中加载页面时,底部的图标就会消失.http://jsfiddle.net/pUhPB/4/

我尝试了在我看来每个可能的显示,垂直对齐和边距值的组合,以便在两个浏览器中都正确,最后,如果我给a-tag vertical-align:middle和图标vertical-align:baseline ,它似乎工作:

.list-item {
    display: block;
    font-weight: bold; …