1

我的水平 CSS 菜单有问题。问题或错误在于，在 Internet Explorer 和 Firefox 上，它不会与徽标直接对齐，它就像下方的半个空格。我好像排不上号 在 Safari 和 Chrome 上它是直线排列的。另外，在 IE 上，logo 和菜单之间有一个额外的间隙，它将菜单移向 logo。在另一个浏览器上它不动，它保持不动。

这是我的 HTML：

<div id="center" style="  
<a href="index.php"><img src="image/New.png" alt="" width="300" height="60"/></a>
<ul id="minitabs">
<li><a href="home.php"><u>Home</u></a></li>
<li><a href="news.php"><u>News</u></a></li>
<li><a href="contact.php"><u>Contact</u></a></li> 
</ul> 
</div>

这是我的 CSS

 .center {margin-left:0px;
          margin-right:0px;
          margin-top:0px;
          margin-bottom:0px;}

  ul#minitabs{list-style: none;margin: -25px 46px 0px 0px; padding: 0px 0px 0px 0px;
              border-bottom: 0px solid #CCC;font-weight: regular;
              font-family:Times New Roman; font-size: 14px;text-align: right;}
  ul#minitabs li{display: inline; border-bottom: 1px;
              margin: 0px 0px 0px 0px; padding: 1px 5px 0px 5px;}
  ul#minitabs a{text-decoration:none; padding: 0px 0px 0px 0px; 
                border-bottom: 0px solid #FFF;color: #000000;}
  ul#minitabs a#current{border-color: #F60;color: #000000;}
  ul#minitabs a:hover{text-decoration:underline; text-color: #999999;}

到目前为止，我找不到解决方案。我很感激任何解释，这样我就可以学习如何管理这个错误，并且一个例子也可以，这样我就可以学习如何修复这个错误。

谢谢

4

2 回答 2

1

我相信浏览器正在以不同的方式格式化您的边框。尝试将您的菜单放在一个 div 中以查看。

<div style="height: 60px; overflow:hidden;">
于 2012-06-21T21:42:32.307 回答
1

您是想将导航放在徽标旁边还是在其下方？如果你把它放在它旁边，我找到了一个解决方案。做这个：

HTML：

<div id="center">  
<a href="index.php"><img src="image/New.png" alt="" width="300" height="60"/></a>
<ul id="minitabs">
<li><a href="home.php"><u>Home</u></a></li>
    <li>&nbsp<a href="news.php"><u>News</u></a></li>
    <li>&nbsp<a href="contact.php"><u>Contact</u></a></li> 
</ul> 
</div>

CSS：

img {float:left;}
li { float:left; margin-top: /*amount you want to move nav down*/;}​​​​​​​​​​​​​​​​​​​​​​​​​​​

否则，如果您希望它位于徽标下方，只需将 CSS 更改为此

li { float:left; margin-left: /*amount you want to move nav right*/;}​

​</p>

于 2012-06-21T21:43:26.380 回答