Position Eingabeelemente auf der rechten Seite der Seite

Question

Ich habe Schwierigkeiten, zwei Elemente auf der rechten Seite der Seite zu positionieren. Seltsamerweise funktionierten die vorgeschlagenen Antworten auf ähnliche Fragen überhaupt nicht oder ergaben schlechte Ergebnisse, aber die meisten von ihnen waren korrekt, wenn ich einfachere Elemente wie zum Beispiel Textfelder verwendete.

Die Aussicht ist: Hier ist, was ich habe:

input, select, textarea { 
 
    max-width: 280px; 
 
    text-size-adjust: auto; 
 
}

<div class="input-group"> 
 
    <span class="input-group-addon">Filter</span> 
 
    <input class="form-control" type="text" placeholder="Search text" ng-model="searchText"> 
 
</div>

Ich habe versucht, die Position mit float: right und unter Verwendung des Bootstrap-Grid-System einzustellen.

Answer 1

Ich nehme an, Sie haben Ihre input-group irgendwie festgelegt, um eine feste Breite anstelle der Standard 100% zu haben. Sonst macht es keinen Sinn über Positionierung zu sprechen.

In jedem Fall hat Bootstrap eine pull-right Klasse, die Sie verwenden können, um Elemente nach rechts zu schweben. Füge es einfach zu deinem ersten div hinzu.

.input-group { 
 
    width: 300px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="input-group pull-right"> 
 
    <span class="input-group-addon">Filter</span> 
 
    <input class="form-control" type="text" placeholder="Search text" ng-model="searchText"> 
 
</div>

Haben Sie einen Lese dazu auf den offiziellen Dokumenten, here

Answer 2

versuchen diese:

<div class="input-group"> 
     <span class="input-group-addon">Filter</span> 
     <input class="form-control" type="text" placeholder="Search text" ng-model="searchText"> 
    </div> 

DEMO

oder

.input-group-addon { 
    min-width:100px; 
    text-align:left; 
} 

DEMO HERE