Question

我想在输入文字的右侧显示搜索按钮，但它显示在它下面。我怎样才能在右边显示它？ Fiddle

<div class="row">
              <div class="page-header col-md-12">
                <h1 class="text-center">Search Teachers</h1>
              </div>
    </div>
    <div class="row" style="margin-top:80px;">
        <!--
        <div class="col-md-4 col-md-offset-1 col-sm-4  col-xs-12">
        <div class="ui-widget">
          <label for="tags">Class: </label>
          <input id="class">
        </div>
        </div>
        -->
        <form class="form-signin" id="Form1" action="search.php" method="post"> 

        <div class=" col-xs-12" style="float:left;display:inline;">
        <div class="ui-widget">
          <label for="city">City: </label>
          <input type="text" id="city"  name="city">
        </div>
        <button class="btn btn-default"  type="submit">Search</button> 
        </div>
        </form>

    </div>

Answer 1

该按钮实际上不在输入字段

内

您只需在搜索按钮

中添加margin-right:-10px即可

找到干净又有效的fiddel：here

Answer 2

<div class="row">
  <div class="page-header col-md-12">
    <h1 class="text-center">Search Teachers</h1>
  </div>
</div>
<div class="row" style="margin-top:80px;">
     <!--
        <div class="col-md-4 col-md-offset-1 col-sm-4  col-xs-12">
        <div class="ui-widget">
          <label for="tags">Class: </label>
          <input id="class">
        </div>
        </div>
    -->
    <form class="form-signin" id="Form1" action="search.php" method="post"> 

    <div class=" col-xs-12" style="float:left;display:inline;">
    <div class="ui-widget" style="float:left; margin-right: 10px">
      <label for="city">City: </label>
      <input type="text" id="city"  name="city">
    </div>

    <button class="btn btn-default"  type="submit">Search</button> 
    </div>
    </form>

</div>

添加 style =“float：left; margin-right：10px”

显示输入文本右侧的搜索按钮

2 个答案: