html - 菜单项之间的间距 (CSS)

Question

我有一个适用于大屏幕的菜单，但是当浏览器的宽度减小(并且菜单换行)时，我无法让菜单项不相互重叠。 p>

HTML:

<div style="padding-top: 10px">
    <a class="menu" style=
    "border: #B1B1B1 solid; border-width: 0px 1px 0px 1px" href="#">Design
    and Install</a><a class="menu" href="#">About this site</a><a class=
    "menu" href="#">Products</a><a class="menu" href="#">F A Q</a><a class=
    "menu" href="#">Portfolio</a><a class="menu" href="#">Contact</a>
</div>

CSS:

.menu {
    font-family: Verdana;
    font-size: 12px;
    color: #000;
    text-align: center;
    text-decoration: none;
    border: #B1B1B1 solid;
    border-width: 0 1px 0 0;
    padding: 10px 17px 10px 12px;
}

.menu:link,.menu:visited {
    background-color: #E5E5E5;
}

.menu:hover,.menu:active {
    background-color: #F9C232;
}

http://jsfiddle.net/9j77E/1/

谢谢，如果你能帮忙。

Answer 1

尝试将 display: inline-block; 添加到 .menu