css - CSS inline-block 问题 - 元素被下推

Question

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

Answer 1

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

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

​</p>

或者您可以使用下面的建议，但不要忘记将“溢出：隐藏”添加到#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;
    }