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

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;
}

显示：内联块;此属性已添加并测试，请check。

Answer 3

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

菜单项（CSS）之间的间距

3 个答案: