左揃え要素と右揃え要素でカスタムナビゲーションバーを作成する

この質問をする前に多くの検索を行い、解決策を見つけることができませんでした。問題：左揃えのアイテムが1つ、残りが右揃えの簡単なナビゲーションバーが必要です。左揃え要素と右揃え要素でカスタムナビゲーションバーを作成する

コード：

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: 'Arial', serif 
 
} 
 

 
.nav { 
 
    font-size: 13px; 
 
    background-color: #7a7d82; 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
.nav li { 
 
    text-align: center; 
 
    float: right; 
 
} 
 

 
.nav li:first-child { 
 
    float: left; 
 
} 
 

 
.nav li a { 
 
    display: block; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
} 
 

 
.nav li a:hover { 
 
    background-color: #000000; 
 
}

<body> 
 
    <div class="navbar-custom"> 
 
    <div id="navbar"> 
 
     <ul class="nav"> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">ABOUT</a></li> 
 
     <li><a href="#">PORTFOLIO</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
     </ul> 
 
    </div> 
 
    </div>

私はfloatを使用して試してみましたが、それは動作するようには思えません。私は、ナビゲーションバーを画面の上部に固定したいと思っています。私は別の<ul>タグにメニュー項目の "HOME"と残りの部分を分割しようとしましたが、どちらもうまくいかないようです。前に尋ねられたことがお詫び申し上げますが、私はCSSに慣れていなくても、まだロープを習っています。

出典

2017-03-02 Aos

ので、いただきました！これで間違っていますか？ - 私にとってこれはあなたが求めたことを行います – Toxide82

"私はフロートを使ってみましたが、うまくいかないようです。"詳しく教える？ –

http://codepen.io/onlyone_aos/full/dvGNBJ/ ここにコードがあります。それは動作していないようです。誰かが以下の解決策を見つけました。私はそれを回答としてマークしました。 – Aos

.navフレックスコンテナ（display: flex）を作成し、その最初の子にmargin-right: auto;を適用します。

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: 'Arial', serif 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    font-size: 13px; 
 
    background-color: #7a7d82; 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
.nav li:first-child { 
 
    margin-right: auto; 
 
} 
 

 
.nav li a { 
 
    display: block; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
} 
 

 
.nav li a:hover { 
 
    background-color: #000000; 
 
}

<body> 
 
    <div class="navbar-custom"> 
 
    <div id="navbar"> 
 
     <ul class="nav"> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">ABOUT</a></li> 
 
     <li><a href="#">PORTFOLIO</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
     </ul> 
 
    </div> 
 
    </div>

出典

2017-03-02 16:56:03 Johannes

これはそれを修正しました！迅速な返信ありがとうございます。なぜこれを修正？ – Aos

それに加えて、なぜ 'float'がうまくいかないのですか？ – Aos

実際、あなたのフロートソリューションは、上記のスニペットとCOdepenの両方で、Firefox Mac上で動作します。ブラウザの問題でなければ動作していないはずです。それでも、フレックスボックスの使用は非常に便利です：フレックスボックスとしてulを定義し、左/右の分離を行う要素にマージン：auto（左または右）を適用します。 – Johannes

浮動は、トリックを行いますと、それにアプローチする方法はいくつかあります

このバイオリンは、クラス使ってそれを実現：

https://jsfiddle.net/vbc330Lj/

<div class="navbar-custom"> 
    <div id="navbar"> 
     <ul class="nav"> 
     <li class="left"><a href="#">HOME</a></li> 
     <li class="right"><a href="#">CONTACT</a></li> 
     <li class="right"><a href="#">PORTFOLIO</a></li> 
     <li class="right"><a href="#">ABOUT</a></li> 
     </ul> 
    </div> 
</div> 

#navbar{ 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
.nav li{ 
    margin: 0 10px; 
} 
.nav li.left{ 
    float: left; 
} 
.nav li.right{ 
    float:right 
}

そして、あなたはまた、より多くのことができます最初のアイテムのみをターゲットにして動的（実際のユースケースの場合）：

<div class="navbar-custom"> 
    <div id="navbar"> 
     <ul class="nav"> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">CONTACT</a></li> 
     <li><a href="#">PORTFOLIO</a></li> 
     <li><a href="#">ABOUT</a></li> 
     </ul> 
    </div> 
</div> 

#navbar{ 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
.nav li{ 
margin: 0 10px; 
} 
.nav li{ 
float: right 
} 
.nav li:first-of-type{ 
float: left; 
}

出典

2017-03-02 16:49:51

左揃え要素と右揃え要素でカスタムナビゲーションバーを作成する

答えて

関連する問題