入力が同じ行の他のものより下にあるdivを押し込むのを防ぐ

Question

通常、divをテキストとして表示する要素をデザインしようとしていますが、クリックすると編集可能なテキスト入力になります。しかし、これらの行を並べると、何らかの理由で入力を表示しているものが他のもののレベルより下にプッシュされます。

私はcodepenに本の最小限の例を作成しました：簡単の関心でhttp://codepen.io/anon/pen/XjZNdZ

を私はインタラクティビティを取り出して、ちょうど私が避けたい状況の例を示した：中間のdivが下にプッシュされるべきではありません他の2つのdivのレベル。

HTML：

<div class="input-cell"> 
    <span></span> 
</div> 
<div class="input-cell"> 
    <input type="text"> 
</div> 
<div class="input-cell"> 
    <span></span> 
</div> 

CSS：を含むdiv要素の高さと幅を指定することは必要であることを

.input-cell { 
    border: 2px solid black; 
    height: 30px; 
    display: inline-block; 
    width: 90px; 
} 

input { 
    width: 60px; 
} 

注。私はそれらを通常のテーブルのようなレイアウトに収める必要があります。

Answer 1

インラインブロックは、コンテンツのない違ったレンダリング、

vertical-align: bottom; 

または使用フロート

// display:inline-block; 
float:left; 

それともflexboxesを使用しようとすることができますを追加してみてください。