1行の線要素

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確実。