Question

我尝试将我的span .btn-search放在右边的输入上。我在我的跨度中添加了拉伸权限，但它似乎不起作用。

<div class="container">
    <div class="row">
        <div id="search-row">
        <div class="input-group input-group-sm">
                         <input type="text" class="textbox">
                         <span class="btn-search pull-right"></span>
                         </input>
                    </div>
    </div>
         </div>
      </div>

这是小提琴：

http://jsfiddle.net/Ln5jQ/

谢谢，

杰罗姆

Answer 1

试一试。我在几个不同的网站上使用过它。我假设你正在使用Bootstrap 3。

http://jsfiddle.net/zach57/wvu25/

<form id="search-form" class="navbar-form" method="get" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>    
</form>

Answer 2

您无法将<span>放入<input>内。要将其置于输入上，请使用position: absolute上的span。这是一个更新的小提琴：http://jsfiddle.net/Ln5jQ/1/

Answer 3

不确定为什么你的小提琴没有保存，所以这就是我提出的解决方案。

CSS：

.btn-search {
    width: 93px;
    height: 49px;
    background-image: -moz-linear-gradient(bottom, #659900 -25%, #65ff00 125%);
    /* gradient overlay */
    background-image: -o-linear-gradient(bottom, #659900 -25%, #65ff00 125%);
    /* gradient overlay */
    background-image: -webkit-linear-gradient(bottom, #659900 -25%, #65ff00 125%);
    /* gradient overlay */
    background-image: linear-gradient(bottom, #659900 -25%, #65ff00 125%);
    /* gradient overlay */
    margin-bottom:2.5px;
}
.textbox {
    width: 540px;
    height: 50px;
    border: 1px solid #cbcbcb;
    /* stroke */
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .24);
    /* drop shadow */
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .24);
    /* drop shadow */
    box-shadow: 0 0 10px rgba(0, 0, 0, .24);
    /* drop shadow */
    position:absolute;
}
#search-row div {
    display: inline-block;
}
.col-centered-search {
    width: 540px;
    float: none !important;
    margin: 0 auto !important;
}
.glyphicon-search {
      postion: absolute;
      margin-left: -25px;  
      margin-top: 15px;    
}

HTML：

<div class="container">
    <div class="row">
        <div id="search-row" class="col-centered-search">
            <input type="text" class="textbox form-control" placeholder="Search">
                <span class="input-group-btn pull-right"><i class="glyphicon glyphicon-search"></i></span>
        </div>
    </div>
</div>

Answer 4

我已经向朋友询问了，我刚刚省略了设定跨度的相对位置。

为什么，我不知道...

这是解决方案

.btn-search {
width: 93px;
height: 49px;
background-image: -moz-linear-gradient(bottom, #659900 -25%, #65ff00 125%);
/* gradient overlay */
background-image: -o-linear-gradient(bottom, #659900 -25%, #65ff00 125%);
/* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #659900 -25%, #65ff00 125%);
/* gradient overlay */
background-image: linear-gradient(bottom, #659900 -25%, #65ff00 125%);
/* gradient overlay */
margin-bottom:2.5px;
}
.textbox {
width: 540px;
height: 50px;
border: 1px solid #cbcbcb;
/* stroke */
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .24);
/* drop shadow */
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .24);
/* drop shadow */
box-shadow: 0 0 10px rgba(0, 0, 0, .24);
/* drop shadow */
position:absolute;
}
#search-row div {
display: inline-block;
}
.col-centered-search {
width: 540px;
float: none !important;
margin: 0 auto !important;
}

HTML：

<div class="container">
<div class="row">
    <div id="search-row" class="col-centered-search">
        <input type="text" class="textbox form-control" placeholder="Search"><span class="btn-search pull-right"></span>

    </div>
</div>
</div>

http://jsfiddle.net/Ln5jQ/9/

感谢您的回复

CSS bootstrap - 在输入上向右拉设置按钮

4 个答案: