额外的空间，另外一个

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>