問題與橫向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菜單

回答

相關問題