Html 菜单项之间的间距 (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8769411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spacing between menu items (CSS)
提问by Dan
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 notto overlap each other.
我有一个在大屏幕上工作的菜单，但是当浏览器的宽度减小（并且菜单环绕）时，我无法让菜单项不相互重叠。
HTML:
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:
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;
}
Thanks if you can help.
如果你能帮忙，谢谢。
回答by Jake Lucas
Try adding display: inline-block;to .menu
尝试添加display: inline-block;到.menu
回答by Sameera Thilakasiri
.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.
显示：内联块；此属性已添加并经过测试，请检查。
回答by rekire
Also if I'm too late you could also set line-heightto 32. Because your font-sizeis 12px plus 2 times 10px padding.
另外，如果我来晚了，你也可以设置line-height为 32。因为你font-size是 12px 加上 2 倍 10px 填充。
