CSS内联块问题 - 元素被推下

Question

演示：http://jsfiddle.net/q4uNj/
所以这就是问题：我无法弄清楚为什么第二个div - class="other" - 被推倒了。

Answer 1

您可以使用css-property vertical-align。 将它添加到“.other”规则，它就可以了。

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

或者您可以使用以下建议，但不要忘记将“overflow：hidden”添加到#toolbar。

Answer 2

他们两个（.button和.other）应该有float：left，所以一切都会好的

Answer 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;
    }