css - div之间的额外空间，另一个

Question

不知道为什么我的 div 之间有额外的空间

http://jsfiddle.net/3cx8w/1/

这很简单：

HTML：

<div id='menu'>
  <div id='menu-homepage'><a href='/?category=homepage'>Homepage</a></div>
  <div id='menu-prices'><a href='/?category=prices'>Prices</a></div>
  <div id='menu-contacts'><a href='/?category=contacts'>Contacts</a></div>
</div>

CSS：

#menu {
    position: absolute;
    top: 16%;
    left: 5%;
    width: 90%;
    background-color: #343434;
    border: 1px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#menu div {
    display: inline-block;
    height: 100%;
    padding: 1% 2%;
    margin: 0;
    border-left: 1px dotted gray;
    border-right: 1px dotted gray;
    font-size: 60%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

#menu a {
    color: white;
    text-decoration: none;
}

请帮忙。

Answer 1

给按钮 div 样式

float:left;

代替

display:inline-block;

并将这个 div 添加到 #menu 的末尾

<div style="clear:both"></div>