線條元素在一條線上

Question

我試圖讓搜索欄，帶日曆圖標的日期輸入以及搜索按鈕全部在行中並在div中居中。到目前爲止，我只是把它集中在div中。但由於某些原因，我不能在行得到它，這種情況發生：

<div class="input-group input-group-lg center"> 
      <div class="input-group"> 
      <input type="text" class="form-control searchbar" placeholder="Search for..."> 
       <div class="input-group date"> 
       <input type="text" class="form-control date" value="12-02-2012"> 
       <div class="input-group-addon calender-icon"> 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
       </div> 
       </div> 

      <span class="input-group-btn"> 
       <button class="btn btn-default search_icon" type="button"><i class="fa fa-search" aria-hidden="true"></i></button> 
      </span> 
      </div> 

這裏是CSS

.calender-icon { 
    border-radius: 0px !important; 
} 
.date { 

    height: 50px; 
    border-top-left-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 

} 
.search_icon { 
    background-color: darkgrey; 
    height: 50px !important; 
    width: 50px !important; 
} 


.searchbar { 
    width:70%; 
    margin: 20px 30px; 
    height: 50px !important; 
    border-bottom-left-radius: 30px !important; 
    border-top-left-radius: 30px !important; 

.center { 
    margin: auto !important; 
} 

不知道爲什麼發生這種情況。到目前爲止，我嘗試過不同的造型，但都失敗了。

Answer 1

如果你把「float：left;」進入每個規範，它應該把它們放在同一條線上。

.calender-icon { 
    float: left; 
    ... 
} 
.date { 
    float: left; 
} 
.searchbar { 
    float: left; 
    ... 
} 
... 

然後，確保.searchbar用一個封閉的大括號正確關閉。