float and margin

by zoho

HTML

<!--
对于 .btngroup 的 margin-left
为比例长度时最后一个会折行，为绝对长度时表现正常
-->
<div id="head">
<div id="logo">
    <a id="project">Home</a>
</div>
<div id="menubar">
    <span class="btngroup">
        <button class="button">One</button>
    </span>
    <span class="btngroup">
        <button class="button">Two</button>
    </span>
    <span class="btngroup">
        <button class="button">Three</button>
    </span>
</div>
</div>

CSS

#head {
  width: 100%;
  height: 40px;
  background: #aaa;
}
#logo {
  float: left;
}
#logo #project {
  line-height: 40px;
}
#menubar {
  height: 40px;
  float: right;
}
.btngroup {
  margin-left: 3%;
  line-height: 40px;
  display: inline-block;
  float: left;
}
.button {
  position: relative;
  height: 40px;
  border: 0px;
  margin: 0px;
  background: #E0E0E0;
  float: left;
}