HTML要素がセマンティックUIと揃っていない

Question

テキスト入力フィールドとボタンをセマンティックUIで1行に表示しようとしています。いくつかの理由の要素が適切に整列されていないと私は、このために責任があるCSSプロパティを把握することはできません。

<div id="filter-input" class="ui left icon input"> 
    <i class="search icon"></i> 
    <input type="text"> 
</div> 
<div class="ui button">Test</div> 

CodePen

更新：最後のdivの修正し終了タグを。

Answer 1

あなたの入力divにはfloat: left;が必要です。

.input { 
    float: left; 
    margin-right: 5px; 
} 

をまたはあなたの入力のdivの垂直揃え：

ちょうどあなたのCSSに、この行を追加し

.input { 
    vertical-align:middle; 
} 

編集：を、あなたはHTML構文に問題があります。チェンジボタンオープンタグ：

<button class="ui floating button">Test</button> 

Answer 2

ないこの

<div class="ui button">Test</button> 

が

<div class="ui button">Test</div> 

してみてくださいdivの内側に入れて...

<div id="filter-input" class="ui left icon input"> 
    <i class="search icon"></i> 
    <input type="text"> 
    <div class="ui button">Test</div> 
</div>