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

アイコンが実際には 40px よりも高く、最初のブロックを押し下げているように見えたので、マググラスをリンク ブロック内に完全に配置しました。

これが機能しています... http://codepen.io/anon/pen/Etxfz

Answer 2

行の高さを削除します。それはトリックを行う必要があります