css - CSS インライン ブロックの問題 - 要素がプッシュ ダウンされる

Question

デモ: http://jsfiddle.net/q4uNj/
ここに問題があります: 2 番目の div - class="other"- がプッシュ ダウンされている理由がわかりません。

Answer 1

css-property vertical-align を使用できます。「.other」ルールに追加すればOKです。

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

</p>

または、以下のアドバイスを使用することもできますが、#toolbar に「overflow: hidden」を追加することを忘れないでください。

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