Wie bootstrap navbar zentrieren, aber auch 1 Element rechts ziehen?

Question

Ich konnte meine Navbar mit dem CSS unten zentrieren. Jetzt möchte ich ein anderes Element einfügen, aber ziehe das nach rechts. Wenn ich jedoch das Symbol hinzufüge, wird es in die nächste Zeile verschoben. Wie zentriere ich meine Navigationsleiste und füge das Symbol hinzu, während alles inline bleibt?

Dies ist ein Stück meiner Navbar mit dem CSS.

<div class="collapse navbar-collapse" id="myNavbar" style="text-align: center;"> 
     <ul class="nav navbar-nav"> 
     <li ><a href="#">Home</a></li> 
     <li ><a href="#">About</a></li> 
     <li ><a href="#">Get Help</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><span class="glyphicon glyphicon-search pull-right" aria-hidden="true" style="font-size:18px; display: inline-block;"></span></li> 
     </ul> 
    </div> 

CSS:

@media (min-width: 708px){ 
    .navbar-nav{ 
    float:none; 
    margin: 0 auto; 
    display: table; 
    table-layout: fixed; 
    } 
    } 

Answer 1

Eine Möglichkeit ist es, die „top“ Eigenschaft auf dem Element hinzufügen dann geben sie einen negativen Wert auf die korrekte Schreibweise Ihrer Suchsymbol zu positionieren.

.search { 
    top: -50px; 
    font-size: 18px; 
} 

Bei Bedarf wird das Hinzufügen zusätzlicher Navigationslinks nicht den Stil ändern. See my plunker

Sie können auch die Stile in Ihren HTML-Tags herausnehmen.