结合输入前置和输入追加形式搜索

Question

我使用bootstrap为我的网站造型。

我发现，这样做的时候：

<form class="form-search navbar-search pull-right"> 
       <div class="input-append input-prepend"> 
        <span class="add-on"><i class="icon-search"></i></span> 
        <input id="searchQuery" class="search-query" type="search" placeholder="Rechercher" /> 
        <a class="btn add-on" href="#">Rechercher</a> 
       </div> 

输入文本框仍然环绕在左侧。

.form-search .input-append .search-query, 
.form-search .input-prepend .search-query { 
-webkit-border-radius: 0; 
-moz-border-radius: 0; 
     border-radius: 0; 

}

我是不是做错了什么：看CSS时不应该如此吗？

Answer 1

与你的类 '.search查询' 问题

是由风格..

.form-search .input-prepend .search-query { 
    border-radius: 0 14px 14px 0; 
} 

删除搜索查询类

Answer 2

您可以创建通过以下方式形式：

的jsfiddle Demo

<form class="form-search navbar-search pull-right"> 
<div class="input-append input-prepend"> <span class="add-on"><i class="icon-search"></i></span> 

<input id="searchQuery" type="search" placeholder="Rechercher" /> <div class="btn-group"> 
      <button class="btn">Rechercher</button> 

      </div> 

    </form> 

他们已经边界半径0定义，因此不需要额外的类，以用于输入设置border-连接半径0：

.input-prepend.input-append input, .input-prepend.input-append select, .input-prepend.input-append .uneditable-input { 

border-radius: 0 0 0 0; 

    }