Question

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

Answer 1

在#nav li{ position: relative; }和li img{ left: 0;}

上

这是代码。 http://jsfiddle.net/yTACT/8/

如何在水平导航菜单中居中文本？

1 个答案: