问题与横向CSS菜单

我有我的横向CSS菜单的问题。这个问题或错误是，在Internet Explorer & Firefox中，它不与标识直接对齐，它就像下面的一半空间。我似乎无法排队。在Safari上& Chrome浏览器直线排列。另外在IE上，徽标和菜单之间还有一个额外的空白，它将菜单移动到徽标。在另一个浏览器中，它不会移动它保持放置。问题与横向CSS菜单

这里是我的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;}

到目前为止，我无法找到一个解决方案。我很感激任何解释，所以我可以学习如何管理这个错误&一个例子也将这样做，我可以学习如何修复这个错误。

谢谢

来源

2012-06-21 LightM1

我假设第一行是'div'是一个错字？它还没完成 – Rodolfo

@Rodolfo，谢谢你的回复！不，这是一个div我试图移动与菜单意义对齐的徽标排队 – LightM1

不，我的意思是，它以'style =“'结束另外，它的ID是'中心'，但在你做的CSS一个'.center'适用于类'center'，而不是id'center'的东西，所以要么css应该是'＃center'或div应该是'class =“center”' – Rodolfo

我相信浏览器格式化你的边界不同。尝试将你的菜单放在div中看看。

<div style="height: 60px; overflow:hidden;">

来源

2012-06-21 21:42:32 Cleverbot

感谢你的回复。你的意思是边界是不同的行为？我已经有徽标的div，我会尝试将该代码放入已有的div容器中，我会对其进行测试并看看是否有效，感谢您的示例和解释！ – LightM1

@ user1473061。我尝试你的例子，它也没有工作，它仍然没有排队 – LightM1

@ LightM1我没有足够的观点来评论你最后的帖子到redelman431，但是如果你把img {float：left;}那么你就会告诉它用float：left;来格式化每一个图像。你对这部分的解决方案将把这个在你想要浮动的图像的这和你的CSS这个在你的CSS .left {float：left;} – Cleverbot

您是否试图将导航栏放在徽标旁边或下方？如果你把它放在旁边，我找到了一个解决方案。这样做：

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

来源

2012-06-21 21:43:26 DrinkJavaCodeJava

@ Ross，谢谢你的回复。是的，我正在尝试将徽标旁边的导航栏移动。这就是为什么有一个徽标的div标签。我正在尝试将其与导航对齐。但我的意图是把它放在徽标旁边。感谢这个例子！我现在将测试它。谢谢 – LightM1

@ redelman431。我尝试你的例子，它不起作用。它仍然没有排队。 – LightM1

这很奇怪，我试过它在jsfiddle，它的工作。 – DrinkJavaCodeJava

问题与横向CSS菜单

回答

相关问题