與輸入組可點擊圖標

Question

我試圖讓在同一行的文本和圖標的工作，彼此相鄰，如引導輸入組，但我不能夠實現它的某些原因。該圖標是可點擊的。

<div class="input-group"> 
<asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" maxlength="20"></asp:textbox> 
<span class="middle-span"> 
    <asp:linkbutton id="btn_Category" runat="server"><i class="fa fa-folder-open" aria-hidden="true"></i></asp:linkbutton> 
    <asp:linkbutton id="imgClearCal" runat="server" tooltip="Clear Category" style="vertical-align: middle; cursor: pointer;"><i class="fa fa-times" aria-hidden="true"></i></asp:linkbutton> 
</span>  
</div> 

請幫忙！

Answer 1

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h2>Custom search field</h2> 
      <div id="custom-search-input"> 
       <div class="input-group col-md-12"> 
        <input type="text" class="form-control input-lg" placeholder="Buscar" /> 
        <span class="input-group-btn"> 
         <button class="btn btn-info btn-lg" type="button"> 
          <i class="glyphicon glyphicon-search"></i> 
         </button> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#custom-search-input{ 
    padding: 3px; 
    border: solid 1px #E4E4E4; 
    border-radius: 6px; 
    background-color: #fff; 
} 

#custom-search-input input{ 
    border: 0; 
    box-shadow: none; 
} 

#custom-search-input button{ 
    margin: 2px 0 0 0; 
    background: none; 
    box-shadow: none; 
    border: 0; 
    color: #666666; 
    padding: 0 8px 0 10px; 
    border-left: solid 1px #ccc; 
} 

#custom-search-input button:hover{ 
    border: 0; 
    box-shadow: none; 
    border-left: solid 1px #ccc; 
} 

#custom-search-input .glyphicon-search{ 
    font-size: 23px; 
} 

演示：https://jsfiddle.net/wvsxq45e/32/