4

ナビゲーション バーで画像を CSS に揃えようとしています。画像のサイズを変更しても、テキストが押し下げられます。

私のdiv htmlコードは次のとおりです。

<div id="menu">
    <ul>
        <li><a href="#"><img src='images/tphome.png' border='0' width='24' height='24'> Home</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

http://jsfiddle.net/nuSLH/

このあたりにアウェイはありますか？

4

4 に答える 4

2

画像に css を追加すると、テキストを強制的に画像の上部に揃えることができます。

#menu img { vertical-align: top;}

または真ん中：

#menu img {vertical-align: middle;}

もう 1 つのオプションは、タグの背景画像をa少しパディングと組み合わせて使用​​することです。

#menu a {
    background: url('http://i.imgur.com/1CRy2G5.png') no-repeat left center; 
    padding-left: 30px; padding-top: 5px;
}
于 2013-03-06T04:18:41.890 に答える
1

画像を挿入する代わりに css クラスと :before を使用することをお勧めします。これはプレゼンテーションであり、コンテンツにとってそれほど重要ではないためです。

これを変更して position: relative... を追加しました。

#menu li {
    float: left;
    position: relative;
}

そして、このようなもの... liにパディングを追加する必要があるかもしれません。

.icon-home:before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background: url(http://i.imgur.com/1CRy2G5.png);
    width: 24px;
    height: 24px;
}

クラスを追加するには...

    <li><a class="icon-home" href="#">Home</a></li>
于 2013-03-06T04:23:09.763 に答える
0

要求された img が見つからなかったため、img タグのサイズが大きくなりました。私の提案は、要求されたimgが見つからない場合、そのimgを削除するのはどうですか

あなたが使用することができますonerror="this.remove()"

ここにフィドルがありますhttp://jsfiddle.net/nuSLH/14/

于 2013-03-06T04:34:56.673 に答える
0

以下のhtmlを変更してください

<div id="menu">
            <ul>
                <li><a class="home" href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

これをcssに追加します

#menu a.home {
    padding: 4px 20px 9px 30px;
    background-image: url(http://i.imgur.com/1CRy2G5.png);
     background-repeat:no-repeat;
}

デモ

于 2013-03-06T04:33:55.420 に答える