CSS内联块问题-下推元素

演示：

---

问题是：我不明白为什么第二个div-

class=“other”

-被按下。

它们两个（.button和.other）都应该有float:left，这样一切都会好起来。

您可以使用css属性垂直对齐。 把它加入到“.other”规则中，它就可以了

.other {
    display:inline-block;
    vertical-align:top;
    height:32px;
    margin:2px;
}

​

或者你可以使用下面的建议，但别忘了在工具栏上添加“溢出：隐藏”。

正确的css

#toolbar {
  height: 36px;
  width: 100%;
  background: lightgray;
   clear:both;
}
.button {
  height: 30px;
  width: 36px;
  margin: 2px;
  float:left;
  border: 1px solid #000;
  cursor: pointer;
  border-radius: 2px;
}
.other {
    float:left;
    height:32px;
    margin:2px;
    }

---

在下面的所有答案中（建议我使用

span

的答案除外），文本框位于

#toolbar

顶部附近。它能垂直居中吗？没关系，明白了<代码>垂直对齐：顶部，如下图所示，线条高度为32px起作用。谢谢大家！这么简单，但我却躲开了。谢谢不行！容器的高度仍然会改变，只需将子容器的溢出设置为隐藏即可。容器下面的所有内容都会移动！如果尝试使用jQuery.hide隐藏子对象，则会在动画期间将“溢出”设置为“隐藏”，从而导致下面的内容在动画中临时移动。在所有子元素上设置“垂直对齐到顶部”没有帮助；“容器仍然在变大。”@Triynko，我相信你有一个不同的箱子。V-A不是每次都可以使用的银弹。请在此处创建一个单独的问题或在评论中发送JSFIDLE链接。