如何在搜索栏左侧添加按钮？答案

【问题标题】：How to add a button to the left of search field?如何在搜索栏左侧添加按钮？
【发布时间】：2016-08-01 20:35:03
【问题描述】：

如何在搜索字段中添加一个按钮，使其看起来像这样？

这是我的代码：

<div id="search">
  <div class="container">
    <h1>Search U.K. house price data</h1>
    <form class="has-success has-feedback has-feedback-left">
      <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
      <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
      <span class="glyphicon glyphicon-search form-control-feedback"></span>
      <button class="btn" type="submit">SEARCH</button>
    </form>
  </div>
</div>

这是我使用此代码得到的结果：

.btn {
position:absolute;
top: 20px;
right: 100px;

}

【问题讨论】：

分享你尝试过的 CSS
.btn { 位置：绝对；顶部：20px；右：100px； }
从右向左改变。
什么都没有改变。

标签： html css twitter-bootstrap

【解决方案1】：

可能是这样的 jsfiddle

css

.btn {
position:absolute;
top: 5px;
right: 10px;
padding-top: 0px;
padding-bottom: 1px;
border-radius: 18px;}
.form-control-feedback{
left:0;
}
#inputSearch{
  padding-left: 30px;
  border-radius: 18px;
}

HTML

<div id="search">
 <div class="container">
 <h1>Search U.K. house price data</h1>
 <form class="has-success has-feedback has-feedback-left">
   <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
   <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
   <span class="glyphicon glyphicon-search form-control-feedback"></span>
   <button class="btn" type="submit">SEARCH</button>
  </form>
 </div>
</div>

【讨论】：

它有什么问题？
可能与其他风格冲突。所以我通过 make position, top and right 更新了 jsfiddle ！important jsfiddle.net/shady_youssery/0kwax0vp/3
jsfiddle.net/0kwax0vp/4 !important 没有影响。除非你的 CSS 中的其他地方有一些其他样式具有更高的层次结构。 :)

【解决方案2】：

只需将表单的高度设置为与搜索栏相同的height 并添加position:relative

此外，您还需要更改按钮的顶部值。

表单是按钮的父元素，绝对元素使用position:relative 监视最近的父元素，并将其自身绝对定位在该父元素的容器内。

【讨论】：

如果您发布表单的完整 CSS，我可以修复您的代码，而不仅仅是按钮部分。我将创建 jsfiddle 并为您指出更改。 :)
我是怎么做到的：#search form { height: 100px; } #搜索表单输入{高度：60px;位置：相对；边框半径：30px；最大宽度：970px； }
#search { text-align: center;白颜色;背景尺寸：封面；
但是我之前没有表单的css。
#search form { 高度：100px; }，因为这是您的按钮的父级，请在此处添加位置：相对