Spacing between menu items (CSS)

Question

I have a menu that works on large screens but when the browser size is reduced in width (and the menu wraps) I can't get the menu items not to overlap each other.

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/

Thanks if you can help.

Answer 1

Try adding display: inline-block; to .menu

Answer 2

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

display:inline-block; this property added and tested, please check .

Answer 3

此外，如果我太晚了你也可以将line-height设置为32.因为你的font-size是12px加2倍10px填充。