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

你还必须在锚的标签中给出行高

这是完整的解决方案 //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 回答