2

私はこのCSSメニューストリップを持っています: http://jsfiddle.net/CgGBL/1/

ここに画像の説明を入力

正常に動作しますが、最初の <li> で少し大きい画像を使用しようとすると、最初のメニュー項目がずれてしまいます。たとえば、この高さと幅を画像のタグに追加しました。

height="20" width="22"

... 最初のメニュー項目の位置がずれています (画像はまだ最初の <li> の高さと幅よりも小さいですが):

ここに画像の説明を入力

より大きな画像を使用し、すべてのメニュー項目を整列させられるようにコードを修正するにはどうすればよいですか?

4

4 に答える 4

3

問題は、アンカーの css 位置によるものです。次のスタイルを「.div_mn ul li a」に含めます。

display: block;

また、内側に img があるアンカーの上部と下部のパディングを減らします。

<a href="#" style="padding-top: 7px; padding-bottom: 7px;"><img height="20" width="22" src="http://images.wikia.com/uncyclopedia/images/7/7d/Icons-flag-us.png" alt="Smiley face" /> </a>

最終的なコード:

http://jsfiddle.net/MxtK6/

それが役に立てば幸い

于 2013-09-20T16:01:30.527 に答える
1

あなたのliアイテムの次のコードに追加してください

li {
display: block;
float: left;
}

これはあなたの問題を防ぐ必要があります

于 2013-09-20T15:53:15.850 に答える
0

画像の高さを増やしながら、インラインスタイルをliに追加して、問題を解決する上部のパディングを減らします

修理

<a href="#" style="font-size: 22; padding-top: 16px; padding-bottom:6px; width:100%; padding-left:"><img src="http://images.wikia.com/uncyclopedia/images/7/7d/Icons-flag-us.png" alt="Smiley face" height="20" width="22"  /> </a>
于 2013-09-20T16:16:15.570 に答える
0

アンカーのタグに line-height も指定する必要があります

ここに完全なソリューションがあります //HTML

<div class="div_mn">
<ul>
    <li><a href="#" style="padding-top: 7px; padding-bottom: 7px;"><img height="22" width="22" src="http://images.wikia.com/uncyclopedia/images/7/7d/Icons-flag-us.png" alt="Smiley face" /> </a>

    </li>
    <li><a href="#">Mnu Itm 1</a>

    </li>
    <li><a href="#">Mnu Itm 2</a>

    </li>
</ul>

//CSS

* {
margin: 0;
padding: 0;
 }
.div_mn {
text-align: center;
position: relative;
padding: 10px;
min-width: 200px;
}
.div_mn ul {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
}
.div_mn ul li {
float: left;
list-style: none;
}
 .div_mn ul li a {
font-family: Arial;
font-size: 12px;
padding: 11px 35px;
text-decoration: none;
display: block;
color: #FFFFFF;
line-height:20px; ////give line height approx or exact your image height
background: -webkit-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -moz-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -ms-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -o-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: linear-gradient(to bottom, #0176B4, #005e90 49%, #005e90 50%, #00527d);
}

更新フィドル

于 2013-09-20T16:18:02.820 に答える