Wie positioniere ich die rechte Seite der Textbox?

Question

Ich möchte meinen Knopf auf der rechten Seite mit CSS positionieren.

hier ist das Skript:

<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; width: 30%; z-index: 1;"> 

<input type="button" class="btn btn-default" onclick="location.reload();" style="width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" /> 

<div id="map" style="position: relative;"></div> 

Answer 1

alle in einen Container hinzufügen und die Behälter positionieren, dann fügen Sie Breiten beide gleich 100% sein:

<style> 
.container { 
position: absolute; 
top: 10px; 
left: 100px; 
} 
.container #search { 
width:80%; 
} 
.container .btn { 
width:20%; 
} 
</style> 
<div class="container"> 
<input id="search" class="form-control" type="text" placeholder="Search Location"> 
<input type="button" class="btn btn-default" onclick="location.reload();" value="Refresh" /> 
</div> 

oder, Wenn Sie bootstrap3 verwenden, folgen Sie einfach diesem Link: http://getbootstrap.com/css/#forms-inline

Answer 2

Versuchen Sie, diese

.search-form input { 
 
    display: inline-block; 
 
}

<div class="search-form"> 
 
<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; width: 30%; z-index: 1;"> 
 

 
<input type="button" class="btn btn-default" onclick="location.reload();" style="width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" /> 
 
</div> 
 
<div id="map" style="position: relative;"></div>

Answer 3

.main{ 
 
width:300px; 
 
height:25px; 
 
position:relative; 
 
} 
 
.button{ 
 
position:absolute; 
 
right:-75px; 
 
top:0px; 
 
}

<form> 
 
<div class="main"> 
 
<input type="text" style="width:100%;" placeholder="Search Here"/> 
 
<button type="reset" class="button">Refresh</button> 
 
</div> 
 
</form>

es versuchen Sobald