线条元素在一条线上

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用一个封闭的大括号正确关闭。