防止在同一行中推入一個包含其他div的輸入

Question

我試圖設計一個通常只是顯示文本的div的元素，但當單擊時它變成可編輯的文本輸入。但是，當我將這些行放在一起時，出於某種原因，顯示輸入的任何內容都會被推到別人的級別之下。

我對codepen創建的這個小例子：http://codepen.io/anon/pen/XjZNdZ

在簡單起見，我刪除了互動性，只是表現出我想避免這種情況的例子：中間的div應不低於推其他兩個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：

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

input { 
    width: 60px; 
} 

注意，指定的高度和包含div的寬度是必需的;我希望他們能夠適應普通的桌面佈局。

Answer 1

內嵌塊，沒有內容不同呈現，嘗試添加

vertical-align: bottom; 

或使用浮動

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

或者你可以嘗試使用flexboxes。