自舉搜索欄 - 如何自舉電網表單元素之間移除空間

這是一個水平搜索框 - 3個元素自舉搜索欄 - 如何自舉電網表單元素之間移除空間

使用自舉電網國產

如何刪除元素之間的差距我試過寬度：100％， 其未填充列。

<span class="row"> 


      <span class="col-md-3 col1"> 

       <button type="button" class="btn btnLocation" data-toggle="dropdown" aria-haspopup="true"> 

             <span class="glyphicon glyphicon-map-marker"></span> Location <span class="caret"></span> 

           </button> 

           <ul class="dropdown-menu"> 

            <li> <a href="#">a</a> </li> 
            <li> <a href="#">b</a> </li> 
            <li> <a href="#">c</a> </li> 
            <li> <a href="#">d</a> </li> 
            <li class="spanider" role="seperate"></li> 
            <li><a href="#">e </a></li> 


           </ul> 
      </span> 

      <span class="col-md-6 col2"> 
       <input type="text" class="inpSearch form-control" id="search-church" placeholder="Your location (City, State, ZIP)"> 
      </span> 





      <span class="col-md-3 col3"> 
       <button class="btnLocation btn" type="submit">Search.....</button> 

      </span> 


     </span>

如何消除元素之間的差距。

小提琴：
Link

來源

2017-09-13 djsreeraj

您可以刪除右側和左側的填充。例如。 'padding-right：0' –

看看這個[JSFiddle]（https://jsfiddle.net/LorekB/Lmp44xfs/4） –

@LorekBryanson謝謝 – djsreeraj

在你的CSS添加此

.row > span { 
    padding: 0; 
}

這將刪除元素之間的所有縫隙/間距。

來源

2017-09-13 08:08:31

編輯您的HTML文件：

<span class="row"> 
    <span class="col-md-3 col1 padding0"> 
    <button type="button" class="btn btnLocation" data-toggle="dropdown" aria-haspopup="true"> 
     <span class="glyphicon glyphicon-map-marker"></span> Location <span class="caret"></span> 
    </button> 

    <ul class="dropdown-menu"> 
     <li> <a href="#">a</a> </li> 
     <li> <a href="#">b</a> </li> 
     <li> <a href="#">c</a> </li> 
     <li> <a href="#">d</a> </li> 
     <li class="spanider" role="seperate"></li> 
     <li><a href="#">e </a></li> 
    </ul> 
    </span> 

    <span class="col-md-6 col2 padding0"> 
    <input type="text" class="inpSearch form-control" id="search-church" placeholder="Your location (City, State, ZIP)"> 
    </span> 
    <span class="col-md-3 col3 padding0"> 
    <button class="btnLocation btn" type="submit">Search.....</button> 
    </span> 
</span>

和編輯的CS addding文件：

.padding0{ 
    padding:0 
}

來源

2017-09-13 08:05:03

自舉搜索欄 - 如何自舉電網表單元素之間移除空間

回答

相關問題