我正在尝试创建一个基本的水平菜单(没有下拉菜单)。已经为菜单创建了图像,但我仍然在菜单的右侧看到一个空格。我使用div创建了导航。 Stack上的大多数类似问题都是针对使用UL和LI创建的菜单,与我的不同。
我的菜单在IE中看起来不错,但在FF,Chrome,Safari和Opera中都没有。 (Sample link)任何人都可以解释为什么会这样,以及我如何解决它?
<div style="width: 915px; height:33px;">
<div style="width:40px; height:33px; float:left;"><img runat="server" border="0" src="~/_images/_nav/nav_left.jpg" /></div>
<div style="width:835px; height:33px; float: left; ">
<div class="mynav" style="width:136px; height:33px; background-image:url(../_images/_nav/nav_student_left2.jpg)" ></div>
<div class="mynav" style="width:155px; height:33px; background-image:url(../_images/_nav/nav_home2.jpg)"></div>
<a runat="server" href="~/studentbranch/checking_savings/"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_stash_my_cash2.jpg);" ></div></a>
<a runat="server" href="~/studentbranch/loans/"><div class="mynav" style="width:133px; height:33px; background-image:url(../_images/_nav/nav_extra_credit2.jpg)"></div></a>
<a runat="server" href="http://www.chachingteenclub.com/default.aspx?cu_id=92" target="_blank"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_cha_ching2.jpg)"></div></a>
<a runat="server" href="~/apps_tools/" target="_blank"><div class="mynav" style="width:135px; height:33px; background-image:url(../_images/_nav/nav_tools2.jpg)"></div></a>
<div class="mynav" style="width:7px; height:33px; background-image:url(../_images/_nav/nav_student_right2.jpg);"></div>
</div>
<div style="width:40px; height: 33px; float:left;">
<img runat="server" border="0" src="~/_images/_nav/nav_right.jpg" />
</div>
</div>
和CSS
.mynav{
float:left;
background-repeat:no-repeat;
padding:0;
display:block;
border:0 none;
outline:0 none;
}
注意:我也尝试使用display:inline
但没有结果。
答案 0 :(得分:0)
编辑:我删除了之前的答案,这更可能是问题(我没有IE,所以我不知道它应该是什么样子。放一张图片理想情况下是一个好主意。)
包含<div>
的宽度为835.其子节点的宽度为:136,155,134,133,134,135,7。总共为834(小于835的一个像素)。右边的垂直线是背景颜色。
编辑(再次):我记得IE的浮动行为与其他浏览器不同(或至少看似)。您可以尝试的方法是将包含<div>
的菜单设为适当的background-color
,而不是使用<div>
宽度播放。