Показать кнопку поиска справа от текста ввода

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"