阻止输入将包含div推到同一行中的其他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;

或使用float

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

或者你可以尝试使用flexboxes。