CSS内联块问题 - 元素被推下[重复]答案

【问题标题】：CSS inline-block issue - element being pushed down [duplicate]CSS内联块问题 - 元素被推下[重复]
【发布时间】：2012-08-01 11:38:16
【问题描述】：

演示：http://jsfiddle.net/q4uNj/
所以问题来了：我不明白为什么第二个 div - class="other" - 被推下。

【问题讨论】：

在下面的所有答案中（除了建议我使用span 的答案），文本框位于#toolbar 的顶部附近。可以垂直居中吗？
没关系，明白了。 vertical-align: top，如下所示，line-height: 32px 可以解决问题。谢谢大家！

标签： css

【解决方案1】：

您可以使用 css-property 垂直对齐。将其添加到“.other”规则中就可以了。

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

或者你可以使用下面的建议，但不要忘记在#toolbar 中添加“溢出：隐藏”。

【讨论】：

如此简单，但让我望而却步。谢谢！
不起作用！容器的高度仍然会改变，只需将孩子的溢出设置为隐藏即可。然后容器下方的所有内容都会发生变化！如果您尝试使用 jQuery.hide 隐藏子项，它会在动画期间将溢出设置为隐藏，从而导致下面的内容在动画中临时移动。将所有子元素的垂直对齐设置为顶部没有帮助；容器仍然改变大小。
@Triynko，我相信你有不同的情况。 V-A 并不是每次都可以使用的灵丹妙药。请在此处创建一个单独的问题或在评论中发送 jsfiddle 链接。

【解决方案2】：

它们（.button 和 .other）都应该有 float:left，所以一切都会好的

【讨论】：

【解决方案3】：

http://jsfiddle.net/q4uNj/14/

正确的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;
    }

【讨论】：