菜单项(CSS)之间的间距

Question

我有一个大屏幕上工作,但是当浏览器大小的宽度减小(菜单包),我不能让菜单项的菜单不互相重叠.

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