レスポンスナビゲーションメニュー要素後方

みなさん、こんにちは、挨拶と挨拶皆さん、レスポンスナビゲーションメニュー要素後方

このダブルスタックナビゲーションのトップメニューは結果を後方に表示します。私は個別に

<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は、画面の右側に表示されるようになりますが、その中の各Liはあなたがそれらが列挙されていた順序に従って表示されます

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

でなければなりません。矛盾する浮動小数点の正しい動作については、コードの残りの部分もチェックする必要があります。

出典

2016-07-07 02:05:55 gavgrif

速い応答に感謝します！私は前にそれを試して、それはページの下にメニューを展開するだけです..私も使用することはできません： ul.PrimaryNav li a {float：right;それは小さな画面のメニュー要素を散らすので、です。ディスプレイと幅：100％を使用してみましたが、まだ運がありません。あなたの考えはどうですか？再度、感謝します！ –

それは明らかな答えのように思えるでしょうが、それを修正しません...左に浮動小数点は、小さな画面上の2番目のナビゲーションの左に上のナビゲーションを単に分離します。これは、テストするファイルに入れることがあります..ありがとう、希望！ –

ok - まず、リストがページを下っても、正しい順序であることに注意してください。次に、あなたはページの下に行く理由を見なければなりません。なぜなら、あなたはそれらのリにインラインブロックを表示するからです。それを表示するように変更した場合は、インラインで表示され、1行で表示されなくなります。次に、ulの右側を浮かせなければなりません。これが助けてくれることを願っています:) – gavgrif

レスポンスナビゲーションメニュー要素後方

答えて

関連する問題