Question

我有以下HTML： -

    <div class="input-append">
       <input id="txtSearchByLocation" name="searchTerm" type="text" class="" placeholder="Search By Location" style="padding-left: 14px;">
       <button id="btn-submit-search" class="btn" type="submit" onclick="searchByLocation()"><span class="icon-search"></span></button>
   </div>

搜索按钮和搜索文字不会粘在一起。我该如何设法做到这一点？

Answer 1

您可以将输入的边框设置为透明，并根据您的喜好设置按钮的样式，并在选择输入元素时将轮廓设置为透明以禁用“蓝色”轮廓并将其包装在div内。就像下面的片段一样。

.btn{
    border-left: 2px solid #929292;
    border-right: transparent;
    border-top: transparent;
    border-bottom: transparent;
    height: 36px;
    outline: transparent;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-out;  
    -moz-transition: all 0.5s ease-out;  
    -o-transition: all 0.5s ease-out;  
    transition: all 0.5s ease-out; 
    background-color: #9e9e9e;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    font-weight:bold;
    color: #333;
}
.btn:hover{
    background-color: #00B6FA; 
}
.input-append{
    border: 2px solid #929292;
    border-radius: 5px;
    float: left;
}
#txtSearchByLocation{
    outline: transparent;
    border: transparent;
    padding: 0px 5px 0px 10px;
    height: 33px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

<div class="input-append">
  <input id="txtSearchByLocation" name="searchTerm" type="text" class="" placeholder="Search By Location" style="padding-left: 14px;">
  <button id="btn-submit-search" class="btn" type="submit" onclick="searchByLocation()">SEARCH</button>
</div>

Answer 2

你可以试试这个：

,WT4RT,AIG-00,694304F,9/1/2017,9/30/2017,"6,975.00",AIG-00201709,10/10/2017,USD,MC
,WT4RT,AIG-00,694317E,9/1/2017,9/30/2017,"2,583.80",AIG-00201709,10/10/2017,USD,MC
,WT4RT,AIG-00,694304G,9/1/2017,9/30/2017,"17,600.00",AIG-00201709,10/10/2017,USD,MC
,WT4RT,AIG-00,694304G,9/1/2017,9/30/2017,740,AIG-00201709,10/10/2017,USD,MC

如何使搜索框和搜索图标粘在一起

2 个答案: