爲什麼我的CSS菜單有時會格式錯誤？

我目前正在一個網站上工作，但主菜單有點問題。爲什麼我的CSS菜單有時會格式錯誤？

有時候，10次中可能有1次，菜單沒有加載它應該的方式。

看看下面的圖片吧！

這是菜單應該如何看起來像： enter image description here

...這是菜單如何實際樣子有時： enter image description here

ul.menu { 
    font-size: 1.21em; 
    color: #333333; 
    padding: 0; 
    margin: 0; 
    padding-top: 29px; 
    height: 100%; 
    font-weight: 600; 
    width: auto; 
    float: right; 
} 
li.menu { 
    list-style-type: none; 
    padding-left: 26px; 
    text-decoration: none; 
    width: auto; 
    float: left; 
} 
li:hover.menu { 
    text-decoration: underline; 
}

HTML

<ul class="menu"> 
    <li class="menu"><a href="page_1.html" class="menu">PAGE 1</a></li> 
    <li class="menu"><a href="page_2.html" class="menu">PAGE 2</a></li> 
    <li class="menu"><a href="page_3.html" class="menu">PAGE 3</a></li> 
</ul>

來源

2014-04-03 user3493886

你的風格永遠不會影響你的標記。在CSS中的類是.menu，並在您的標記其top_menu。如果這只是顯示代碼的失敗;問題可能是ul.menu正確的;與沒有給予witdth。所以你應該在那裏設置一個最小寬度。 – caramba

是否真的需要在ul，li和a上添加相同的類名，而不是在li上添加類，並且可以通過ul.menu li {}，ul.menu li {}來在css中訪問它，這更加健壯，有用 –

'li：懸停。菜單{text-decoration：underline;}'是無用的代碼，因爲這是懸停時無論如何都是鏈接的默認行爲。它應該被刪除。 – TylerH

您的HTML代碼中的類是'top_menu'，但它是CSS中的'菜單'。此外，您還應該加入：

display:inline-block; 
vertical-align:top;

的菜單類，（因爲李不在線默認）

，並刪除

float:left;

來源

2014-04-03 13:25:29 Gwenc37

菜單元素是浮動的（li菜單是左浮動的），顯示行內塊不會做任何事情 – Huangism

是的，事實上。我可以確切地說。我將核心我的回答 – Gwenc37

你期望'vertical-align：top;'實現什麼？因爲在這裏沒有任何成就。 – TylerH

你的問題有點含糊。你想讓你的菜單一直漂浮在頁面的右側嗎？這就是您當前的float:right/left;屬性最終實現的目標。

如果你不希望出現這種情況，和/或如果你想在你的菜單項的造型更精確的控制，你應該與display: inline;或display:inline-block;（更換float: right;和float: left;都將完成內嵌樣式您正在尋找，但後者將在頂部和其他地方有更多的填充）。

另一個問題是您的li:hover.menu選擇器代碼現在完全是多餘的; text-decoration: underline;是已懸停的鏈接的默認行爲。爲了達到你想要的效果，你的鏈接上有text-decoration: none;，直到你將它們懸停在它們上面，你需要改進你的選擇器。現在，您的text-decoration: none;屬性應用於li元素，但不適用於其子元素（a元素）。我已經在下面的CSS中解決了這個問題。

我的CSS：

ul.menu { 
    font-size: 1.21em; 
    color: #333333; 
    padding: 0; 
    margin: 0; 
    padding-top: 29px; 
    height: 100%; 
    font-weight: 600; 
    width: auto; 
    display: inline-block; 
} 
li.menu { 
    list-style-type: none; 
    padding-left: 26px; 
    text-decoration: none; 
    display: inline-block; 
} 

li.menu>a { 
    text-decoration: none; 
    color: #333333; 
} 

li:hover.menu { 
    text-decoration: underline; 
}

JSFiddle

不管，除非你設定一個固定的寬度爲您的菜單DIV，你的鏈接總是會落在線垂直當視口不寬足以容納他們全部在線。

來源

2014-04-03 13:45:59 TylerH

爲什麼我的CSS菜單有時會格式錯誤？

回答

相關問題