CSS菜单项未对齐

Question

我有这个CSS菜单条：http://jsfiddle.net/CgGBL/1/

它工作正常，但是如果我尝试在第一个＆lt; li＆gt;上使用稍大的图像。第一个菜单项未对齐。例如，我将此高度和宽度添加到图像的标记：

height="20" width="22"

...现在第一个菜单项未对齐（即使图像仍然小于第一个＆lt; li＆gt;高度和宽度）：

如何修复我的代码以允许我使用更大的图像并保持所有菜单项对齐？

Answer 1

问题是锚的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/

希望有所帮助

Answer 2

添加到您的li项目下一个代码

li {
display: block;
float: left;
}

这必须防止您的问题

Answer 3

在增加图像高度的同时，为li添加内联样式以减少顶部填充 这将解决您的问题

<强> FIX

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

Answer 4

您还必须在锚点标记中给出行高

这是完整的解决方案 // 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);
}

更新Fiddle