标签菜单重叠

Question

我制作了一个CSS菜单，但各个标签，或者说是一排标签，似乎相互重叠。我使用了white-space：在标签菜单上预先包装宽度：

html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}

#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}

Answer 1

一般情况下，不要为菜单设置LI样式，设置A标记的样式并使用display:block或inline-block

Answer 2

不确定这是否是您想要的但我认为您float: left

中可能遗漏了li

代码：http://jsfiddle.net/vT5vd/

BTW列表非常适合菜单，几乎完全使用！

Answer 3

标签的处理方式就像一行文字。行间距设置为文本的高度，导致较大的选项卡重叠。要纠正这个，只需添加一个 行高：1.8; 在选项卡列表项部分中输入到css文件。也。您可以在选项卡列表中放置一个中断或段落标记，以控制它们在下一行中的位置，并避免拆分选项卡。

ul.tabs li a
{
    font: normal 18px Verdana;
    line-height: 1.8;
    text-decoration: none;
    position: relative;
    padding: 0px 8px;
    border: 1px solid #CCC;
    border-bottom-color:#AAA;
    color: #000;
    background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
    border-radius: 2px 2px 0 0;
    outline:none;
}