FIXED:我只需要将“float:left”应用于“li”元素而不是imgs。谢谢!如何在水平导航菜单中将文字居中放在图像上?
我有一个水平导航菜单,我努力让它在所有浏览器中都能正常工作。我创建了一个小提琴这里:
它在Chrome,Safari和Opera的伟大工程。但是,在Firefox和Internet Explorer中,文本没有正确对中每个按钮。相反,文本从第二个按钮开始并溢出到右侧。
任何人都可以找出解决办法吗?
HTML
<div id="nav">
<ul>
<li><a href="index.htm"><span>HOME</span><img src="http://www.cawyatt.co.uk/home-button.png" alt="Website Navigation. Home Button" title="Home" height="115" width="120" /></a></li>
<li><a href="how-use-services.htm"><span>HOW TO USE OUR SERVICES</span><img src="http://www.cawyatt.co.uk/how-button.png" alt="Website Navigation. How To Use Our Services Button" title="How To Use Our Services" height="115" width="120" /></a></li>
<li><a href="playstation-repair.htm"><span>PLAYSTATION REPAIR</span><img src="http://www.cawyatt.co.uk/playstation-button.png" alt="Website Navigation. Playstation Repair Button" title="Playstation Repair" height="115" width="120" /></a></li>
<li><a href="xbox-repair.htm"><span>XBOX REPAIR</span><img src="http://www.cawyatt.co.uk/xbox-button.png" alt="Website Navigation. Xbox Repair Button" title="Xbox Repair" height="115" width="120" /></a></li>
<li><a href="wii-repair.htm"><span>WII REPAIR</span><img src="http://www.cawyatt.co.uk/wii-button.png" alt="Website Navigation. Wii Repair Button" title="Wii Repair" height="115" width="120" /></a></li>
<li><a href="customer-reviews.htm"><span>CUSTOMER REVIEWS</span><img src="http://www.cawyatt.co.uk/reviews-button.png" alt="Website Navigation. Customer Reviews Button" title="Customer Reviews" height="115" width="120" /></a></li>
<li><a href="location-map.htm"><span>LOCATION AND MAP</span><img src="http://www.cawyatt.co.uk/map-button.png" alt="Website Navigation. Location And Map Button" title="Location and Map" height="115" width="120" /></a></li>
<li><a href="contact.htm"><span>CONTACT US</span><img src="http://www.cawyatt.co.uk/contact-button.png" alt="Website Navigation. Contact Us Button" title="Contact Us" height="115" width="120" /></a></li>
</ul>
CSS
ul, ol, dl {
padding:0;
margin:0;
list-style:none;
}
#nav {
position:relative;
width:960px;
height:115px;
margin-bottom:10px;
background-image: url(http://www.cawyatt.co.uk/nav-bg.png);
}
#nav li a span {
position:absolute;
width: 120px;
top: 70px;
text-align:center;
z-index:2;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#nav li a img {
float:left;
-webkit-transition:opacity 0.7s ease-in-out;
-moz-transition:opacity 0.7s ease-in-out;
-o-transition:opacity 0.7s ease-in-out;
transition:opacity 0.7s ease-in-out;
}
#nav li a:hover img {
opacity:0;
}
为什么你不使用后,之前在CSS? – underscore
对不起,浪费你的时间,但它现在全部排序。我只需要在“li”元素而不是imgs上应用“float:left”。谢谢! – Chris