html - 无序列表错误

Question

我在 ul 中遇到布局问题。由于某种未知原因，我的 ul 中的第一个 li 被下推。看图片。

这是我的 html:

         <ul class="mobile-group">
            <li>
                <a href="#" class="link">
                    <span class="mag-glass">&#9906</span>
                </a>
            </li>
            <li>
                <a href="#" class="link">
                    <img src="http://placehold.it/50x40&text=LafLife"> &#8711;
                </a>
            </li>
        </ul>

和我的CSS:

.mag-glass{
    color: #999;
    font-size: 2em;
    vertical-align:middle;
    display:inline-block;
    line-height: .5;
    box-sizing: border-box;
    clear: both;
    -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
         -o-transform: rotate(45deg);
}

ul.mobile-group{
    float: right;
}

ul.mobile-group li{
    display: inline-block;
    list-style: none;
    height: 40px;
    padding: 0em .75em 0 .75em;
    box-sizing: border-box;
    border-left: 1px solid #888;
}

ul.mobile-group li a{
    color: #999;
    text-decoration: none;
}

拜托，任何帮助都很棒。

Answer 1

能够使用以下 css 解决此问题....

ul.mobile-group {
    float: right;
}

ul.mobile-group li{
    display: inline-block;
    list-style: none;
    height: 40px;
    position: relative;
    padding: 0em .75em 0 .75em;
    border-left: 1px solid #888;
}

.mag-glass{
    position: absolute;
    top: -6px;
    color: #999;
    font-size: 2.2em;
    display: block;
    -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
         -o-transform: rotate(45deg);
}

ul.mobile-group li a{
    color: #999;
    display: block;
    height: 40px;
    min-width: 16px;
    text-decoration: none;
}

我只是将 mag-glass 绝对定位在链接 block 内，因为看起来图标实际上比 40px 高并将第一个 block 向下推。

这是工作... http://codepen.io/anon/pen/Etxfz