響應式導航菜單元素倒退

此雙棧導航的頂層菜單顯示結果倒退。我嘗試造型

<li>'s

單獨或者它沒有工作，或者我做錯了。我也掏出了很多頭髮，但那也沒用。：D請任何人都請點亮一些光？非常感謝！

<!DOCTYPE html> 
<html> 
<head> 
<!--From secondary Nav - find out what this does--> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
body {margin:0;} 
ul.PrimaryNav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#000;text-transform:uppercase;} 
ul.PrimaryNav li {float:right;color:#FFFFFF;} 
ul.PrimaryNav li a {display:inline-block;color:#FFFFFF;;text-align:center;padding:20px 20px;text-decoration:none;transition:0.3s;font-size:17px;} 
ul.PrimaryNav li a:hover {background-color:#111;color:#FFFFFF;} 
ul.PrimaryNav li.icon {display:none;} 

@media screen and (max-width:680px) { 
ul.PrimaryNav li:not(:first-child) {display:none;} 
ul.PrimaryNav li.icon {float:right;display:inline-block;} 

ul.PrimaryNav.responsive {position:relative;} 
ul.PrimaryNav.responsive li.icon {position:absolute;right:0;top:0;} 
ul.PrimaryNav.responsive li {float:none;display:inline;} 
ul.PrimaryNav.responsive li a {display:block;text-align:left;} 
} 

@media screen and (min-width:680px) { 
ul.PrimaryNav {width:100%; float:right;} 
} 

ul.secondaryNav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#CC0000;text-transform:uppercase;} 
ul.secondaryNav li {float:left;} 
ul.secondaryNav li a {display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none;} 
ul.secondaryNav li a:hover:not(.active) {color:#FFFF00;} 
ul.secondaryNav li a.active {background-color:#CC0000;} 

@media screen and (min-width:320px) and (max-width:680px) { 
ul.secondaryNav li {float:left;width:100%;border-radius:0px 0px 0px 0px;-webkit-border-radius:0px 0px 0px 0px;-moz-border-radius:0px 0px 0px 0px;border-bottom:1px solid #000;} 
} 

@media screen and (min-width:680px) { 
ul.secondaryNav {border-radius:0px 0px 10px 0px;-webkit-border-radius:0px 0px 10px 0px;-moz-border-radius:0px 0px 10px 0px;width:680px;} 
} 

</style> 
</head> 
<body> 

<ul class="PrimaryNav"> 
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
<li><a class="active" href="#home" role="navigation">Home ICON</a></li> 
<li><a href="#news">Solutions</a></li> 
<li><a href="#contact">Results</a></li> 
<li><a href="#about">Clients</a></li> 
<li><a href="#about">Create Wealth</a></li> 
<li><a href="#about">About</a></li> 
<li><a href="#about">Charity</a></li> 
</ul> 

<ul class="secondaryNav"> 
<li><a href="#home">Design &amp; Build</a></li> 
<li><a href="#news">Digital Marketing</a></li> 
<li><a href="#contact">Measurement &amp; Improvement</a></li> 
</ul> 


<script> 
function myFunction() { 
document.getElementsByClassName("PrimaryNav")[0].classList.toggle("responsive"); 
} 
</script> 

</body> 
</html>

來源

2016-07-07 Andrea B

那是因爲你是浮動的每個李權 - 你應該只浮動適用於UL（迫使它在屏幕的右側）不適用於每個立在UL：

ul.PrimaryNav li {float:right;color:#FFFFFF;}

應該

ul.PrimaryNav {float:right;.... 
ul.PrimaryNav li {color:#FFFFFF;}

這將導致顯示在屏幕的右側整個UL，但在它的每個李將根據你讓他們列出的順序顯示。您還需要檢查其他代碼是否存在衝突的float：正確的行爲。

來源

2016-07-07 02:05:55 gavgrif

感謝您的快速響應！我之前嘗試過，它只是將菜單向下擴展。我也不能使用： ul.PrimaryNav li a {float：right; ，因爲它將菜單元素分散在較小的屏幕上。嘗試使用顯示和寬度：100％，但仍然沒有運氣。請問你有什麼想法？再次感謝！ –

這看起來像是一個明顯的答案，但沒有解決它...浮動左邊簡單地分隔頂部的導航到小屏幕上的第二個導航的左側。這可能需要放入一個文件來測試..謝謝，希望！ –

好 - 首先要注意的是，即使列表在頁面下方 - 它按照正確的順序。然後，你需要看看爲什麼它會在頁面上顯示 - 這是因爲你在這些頁面上顯示：inline-block。如果你改變它來顯示：inline，那麼它將在一行中消失 - 那麼你必須將ul浮起來。希望這有助於:) – gavgrif

響應式導航菜單元素倒退

回答

相關問題