在其上键入内容时，Div位置会发生变化

Question

DEMO

我有一行div并且理论上我没有必要放在一个额外的容器div中以保持它们在同一条线上，因为每个都有15％的宽度，所以可以放在同一条线上。

它们被正确放置，直到你输入任何东西，然后由于某些我不理解的原因它们会进入下行位置，而我试图解决而不将它们关闭在容器上以避免这种情况。我怎么能？

每个人的CSS都是：

.content-progra [class^="cono-"],
.content-progra [class*="cono-"]{
    width:15%; height:150px;
    background-color: red;
    margin:10px 0.5%;
    display: inline-block;

}

Answer 1

将float:left;添加到css class.this将起作用

Answer 2

您应该将display: inline-block更改为float:left

JSFiddle

Answer 3

要解决显示器上的垂直对齐：内联块元素，您需要使用vertical-align:top