菜单项之间的间距（CSS）

我有一个可以在大屏幕上工作的菜单，但是当浏览器尺寸减小宽度（并且菜单换行）时，我无法使菜单项而不是彼此重叠。菜单项之间的间距（CSS）

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/

感谢如果你可以提供帮助。

来源

2012-01-07 Dan

请再检查一下。它解释了为什么发生。 – rekire 2012-01-07 11:56:06

是的Rekire，这对我们为什么这样做并帮助了我提供了一些观点，谢谢。 – Dan 2012-01-07 12:02:49

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

来源

2012-01-07 11:45:56

谢谢，它修复了它。 – Dan 2012-01-07 11:49:09

.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。

来源

2012-01-07 11:47:40

明白了，谢谢Sameera – Dan 2012-01-07 12:01:32

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

来源

2012-01-07 11:54:10 rekire

感谢那Rekire – Dan 2012-01-07 12:00:43

菜单项之间的间距（CSS）

回答

相关问题