如何定位文本框右侧的按钮？答案

【问题标题】：How to position the button right side of textbox?如何定位文本框右侧的按钮？
【发布时间】：2017-02-27 06:43:51
【问题描述】：

我想使用 CSS 将我的按钮放在右侧。

这是脚本：

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

【问题讨论】：

右侧的按钮已准备就绪...！！
已经在右边了，只有右边是指最右边的角落？
保罗，它已经在右边了。 codepen.io/anon/pen/mWJRgg
添加适当的标签可以提高获得答案的机会

标签： html css button position

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

将所有内容添加到一个容器中并定位容器，然后将两者的宽度添加为等于 100%：

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

或者，如果您使用 bootstrap3，只需点击以下链接： http://getbootstrap.com/css/#forms-inline

【讨论】：

【解决方案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>

试一试

【讨论】：