Float right funktioniert nicht?

Question

Ich habe viele Lösungen auf SO versucht und keiner von ihnen scheint zu funktionieren. Ich habe viele verschiedene Methoden ausprobiert, um Navbar-Recht zur Arbeit zu bekommen, aber ohne Erfolg.

"Login" sollte auf der rechten Seite sein.

Hier ist mein nav:

<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> 

Und die entsprechende 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; 
} 

Ich habe versucht, mehrere Positionen, Displays, etc. Ich denke das Problem könnte in der Flexbox sein? Als ich einen Container um die Uls anbrachte, zog es nach rechts, aber auch brach meine Flex Box zentriert.

Danke!

JSFiddle: https://jsfiddle.net/ga3rcg0w/ (Achten Sie auf die Web-Ansicht erweitern)

Answer 1

Try this: Element in Ihrem Browser Inspizieren Verwendung.

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

Answer 2

Lets versuchen, die .navbar Position relativ zu machen, und einige Wechsel und Code für right Klasse hinzuzufügen.

Und der Code sieht:

.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; 
    } 

Es sollte wie arbeiten, was Sie erwartet :)

Answer 3

ich in der Lage war, um es mit diesen zu arbeiten.

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

Float funktioniert nicht wegen der Flexbox.