如何将搜索按钮对齐到搜索框的右侧

Question

如何将按钮对齐到文本框的右侧，在搜索框上使用表单控件后，我可以将按钮对齐到文本框的左侧，但我希望将它放在对了，请帮忙

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>
    <div class ="form-group pull-right"> 
       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
    </div>
    <div class="pull-right">
       <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
    </div> 
  </div>
</div>

The search box and button

Answer 1

再次修复！

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>   
    <div class="pull-right">
       <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
    </div> 
    <div class ="form-group pull-right"> 
       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
    </div>
  </div>
</div>

Answer 2

您可以在按钮标签上使用 style=float: right; 使按钮右对齐，然后相应地调整边距和填充。

Answer 3

在 form 元素上尝试输入组，bootstrap 默认提供那些类

这就是您使用它们的方式

HTML

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>

    <div class="col-sm-6 pull-right">
    <div class ="input-group search-bar"> 

       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
       <span class="input-group-addon">
       <button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
       </span>
    </div>
    </div>


  </div>
</div>

CSS

.search-bar{
  padding:0;
}
.search-bar .input-group-addon{
  padding:0;
}
.search-bar .search-btn{
  padding:5px  12px;
}

Link for reference

希望这对您有所帮助..

Answer 4

只是换个位置：

变化：

<div class ="form-group pull-right"> 
     <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
   <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
       <span class="glyphicon glyphicon-search"></span>
   </button>
</div>

收件人：

<div class="pull-right">
    <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</div>
<div class ="form-group pull-right"> 
    <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>

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

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>
    <div class="pull-right">
       <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
    </div>
    <div class ="form-group pull-right"> 
       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
    </div> 
  </div>
</div>

Answer 5

这是一个内嵌搜索表单的例子：

<div class="pull-right">
          <form method="get" action="">
            <div class="form-group form-inline">
              <input type="text" placeholder="search" class="form-control" name="s">
              <button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>
</div>

如何将搜索按钮对齐到搜索框的右侧

How to align the search button to the right of search box

html

css

form-control