フロートは正しく動作していませんか？

Question

私はSOの多くのソリューションを試してみましたが、どれもうまくいかないようです。私はnavbar-rightを取得するために多くの異なる方法を試しましたが、役に立たないものです。

「ログイン」は右側にある必要があります。ここで

は私のナビゲーションです：

<div class="navbar-header"> 

    <a href="#" class="logo"> 
    <img alt="Brand" src="img/logo.png"> 
    </a> 
</div> 

    <ul class="nav navbar-nav main-nav"> 
    <a href="index.php"><li>Coin Flip</li></a> 
    <a href="#"><li>Deposit</li></a> 
    <a href="index.php"><li>Support</li></a> 
    <a href="index.php"><li>FAQ</li></a> 
    <a href="index.php"><li><i class="fa fa-twitter" aria-hidden="true"></i></li></a> 
    <a href="index.php"><li><i class="fa fa-steam" aria-hidden="true"></i></li></a> 
    </ul> 
    <div class="right"> 
    <ul class="nav navbar-nav navbar-right"> 
     <a href="index.php"><li>Login</li></a> 
    </ul> 
    </div> 

し、関連するCSS：私は等の複数の位置、ディスプレイを、試してみました

.navbar { 
    background-color: #0C1322; 
    box-shadow: none; 
    z-index: 1000; 
    border: 0; 
    height: 70px; 
    border-bottom: inset 1px #2F394E; 
    display: flex; 
    align-items: center; 
    padding-left: 25px; 
} 


.navbar a { 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #BDC0C5 !important; 
    word-wrap: none; 
    font-style: italic; 
    font-size: 15px; 
    padding: 0 !important; 
    transition: 0.5s all; 
    align-self: center; 
    padding-right: 30px !important; 
} 

.navbar a .fa { 
    font-size: 20px; 
} 

.navbar a:hover { 
    color: #4c7ba3 !important; 
    text-decoration: none; 
} 

.right { 
    float: right; 
} 

.main-nav { 
    padding-left: 30px; 
    display: flex; 
    align-content: center; 
    justify-content: center; 
} 

私は問題がかもしれないと思いますフレックスボックスに入っていますか？私がulの周りにコンテナを追加したとき、それは正しく引っ張られましたが、私のフレックスボックスのセンタリングも壊しました。

ありがとうございます！

JSFiddle：https://jsfiddle.net/ga3rcg0w/（ウェブビューを展開することを確認してください）

Answer 1

はこれを試してみてください：ブラウザの要素を点検して使用します。

<ul class="nav navbar-nav navbar-right" style="float:right"> 
    <a href="index.php"><li>Login</li></a> 
    </ul> 

Answer 2

相対へ.navbar位置、およびいくつかの変更を行うとrightクラスのコードを追加しようとします。

そしてコードが見えます：

.navbar { 
     background-color: #0C1322; 
     box-shadow: none; 
     z-index: 1000; 
     border: 0; 
     height: 70px; 
     border-bottom: inset 1px #2F394E; 
     display: flex; 
     align-items: center; 
     padding-left: 25px; 
     position:relative;    /* <-- Add This */ 
    } 


    /* New Style */ 


    .right { 
     position:absolute; 
     top:0; 
     right:0; 
    } 

    .right ul { 
     margin-right:10px; 
    } 

それはあなたが、私はそれがこれで仕事を得ることができました:)

Answer 3

期待したものと同様に動作するはずです。

.right { 
margin-left: auto; 
margin-right: 25px; 
} 

フレックスボックスのためにフロートが動作しません。