CSSを使用してTopNavBarでリンクを整列する方法

Question

私が取り組んでいるサイトのための反応的な固定トップナビゲーションバーを作成しました。私は自分自身でCSSを教えています。この瞬間から、私は2週間の言語の経験があります。

フィドルリンクhereを見つけることができます。

/* BASIC STYLE START */ 

body { 
    margin: 0; 
    background-color: #FFFFFF; 
    font-family: 'Titillium Web', Arial, sans-serif; 
} 

/* BASIC STYLE END */ 





/* NAVIGATION BAR START */ 

ul.topnav { 
    margin: 0; 
    padding: 0; 
    background-color: #2F2E2E; 
    overflow: hidden; 
    list-style-type: none; 
    width: 100%; 
    position: fixed; 
    top: 0; 
} 

ul.topnav li { 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

ul.topnav li a { 
    margin: 20px; 
    padding: 0; 
    color: #FFFFFF; 
    overflow: hidden; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    font-size: 10px; 
    font-weight: 400; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
} 

ul.topnav li a:hover { 
    color: #B0AAA9; 
    transition: 0.3s; 
} 

ul.topnav li a.active { 
    color: #B0AAA9; 
} 

@media screen and (max-width: 800px){ 
    ul.topnav li.right, 
    ul.topnav li { 
     float: none; 
} 
} 

/* NAVIGATION BAR END */ 

私の問題は、ナビゲーションバー内のリンクを整列させることです。私はそれに応じて以下のように調整したい。

忠誠タイトル - ナビゲーションバー ホーム-FAQのリンクの左側 - ナビゲーションバーのセンターコラム 登録&ログインリンク - ナビゲーションバーの右

私が直面している問題は、私が実際に見えることはできませんということですそれらを適切に整列させることができます。 HTMLのクラスを変更してRegister &のログインリンクを右に移動する方法を考えましたが、Home-FAQリンクを中心に移動することはできません。また、ナビゲーションバーのパディング/マージンの値を変更すると、応答のあるモバイルメニューがリンク全体で変化します（非中心）。

私は非常にこれに新しいですので、私は助けていただければ幸いです。また、スタイルシートに冗長コードがあるかどうか教えてください。

最終的に、このナビゲーションバーを上にして、3列の視差スクロールサイトの1つを作成します。私はダウンロードされたテンプレートを使用するつもりだったが、私は何も学ばないので、何のポイントもない。

Answer 1

問題は、次のとおりです。

1. あなたは<ul>内に直接<div>を持つことはできません。それは完全に無効です。
2. ul.topnav li.right, ul.topnav liは、あなたがする必要がどのようなfloat: none;

と矛盾しているルールは、このルールを作成し、次のとおりです。

ul.topnav li {float: left;} 

あなたはすべて設定する必要があります。パララックススクロールが必要な場合は、間違いなくJavaScriptが必要です。

プレビュー

フィドル：https://jsfiddle.net/9go9x2ug/