Ziehen Sie die rechte Maustaste mit Eingang in Header

Question

Ich versuche, auf der rechten Seite in der Kopfzeile eine Schaltfläche mit einem Eingabetextfeld zu ziehen, das ist mein Code:

<div class="page-header"> 
    <div class="pull-left"> 
     <h2>Header</h2> 
    </div> 
    <div class="pull-right"> 
     <div class="form-group label-floating"> 
      <label class="control-label" for="focusedInput1">Search</label> 
      <input class="form-control" id="focusedInput1" type="text"> 
     </div> 
     <button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button> 
    </div> 
    <div class="clearfix"></div> 
</div> 

so wie Sie sehen können, ich habe auf der linken Seite der Titel der Kopfzeile und auf der rechten Seite möchte ich in der gleichen Zeile die Eingabe und eine oder mehrere Schaltflächen, das Problem ist, wenn ich nur Schaltfläche hinzufügen, es funktioniert perfekt, alle auf der gleichen Linie, wenn ich ein Formular hinzufügen Gruppe in Eingabe gehen in zwei Zeilen, wie Sie in der Abbildung sehen können.

Wie kann ich alle in der gleichen Zeile?

Dank

Answer 1

versuchen, dies zu machen div

div class = "form-Gruppen-Label-floating"

gehen inline mit der Taste

Taste id = "show-hide-Filter-Button"

mit CSS "display: inline-block" auf dem div (standardmäßig mit geht "display: block")

Answer 2

hinzufügen display: inline zur .form-Gruppe oder Anzeige: flex zum .pull rechts

Answer 3

Sie diese mit Flexboxdisplay: flex sowohl auf Kopf- und pull-right Klasse verwendet nur tun kann.

.page-header, .pull-right { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
}

<div class="page-header"> 
 
    <div class="pull-left"> 
 
    <h2>Header</h2> 
 
    </div> 
 
    <div class="pull-right"> 
 
    <div class="form-group label-floating"> 
 
     <label class="control-label" for="focusedInput1">Search</label> 
 
     <input class="form-control" id="focusedInput1" type="text"> 
 
    </div> 
 
    <button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button> 
 
    </div> 
 
</div>

Answer 4

Die Schaltflächen und der Feldcontainer sollten "display: inline-block;":

<div class="page-header"> 
     <div class="pull-left" style="float:left;"> 
       <h2>Header</h2> 
     </div> 
     <div class="pull-right" style="float:right;"> 
       <div class="form-group label-floating" style="display:inline-block;"> 
         <label class="control-label" for="focusedInput1">Search</label> 
         <input class="form-control" id="focusedInput1" type="text"> 
       </div> 
       <button style="display:inline-block;" id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button> 
     </div> 
     <div class="clearfix" style="clear:both;"></div> 
</div> 

Answer 5

Versuchen Sie, diese fiddle

<nav class="navbar page-header"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Header</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
    <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
     <input type="text" placeholder="search" class="form-control search"> 
     </div> 
     <button type="submit" class="btn btn-transparent">Mostra Filtro</button> 
    </form> 
    </div>