选项卡菜单重叠

发布于 2024-12-07 08:44:18 字数 652 浏览 0 评论 0原文

我制作了一个 CSS 菜单，但各个选项卡，或者更确切地说是一行选项卡，似乎彼此重叠。我使用了空白：在选项卡菜单本身上预包装了宽度：

在此处输入图像描述

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

原文

I made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:

enter image description here

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尾戒 2024-12-14 08:44:18

一般来说，不要为菜单设置 LI 样式，而为 A 标记设置样式并使用 display:block 或 inline-block< /代码>

回复收藏 0 原文

我早已燃尽 2024-12-14 08:44:18

不确定这是否是您想要的，但我认为您的 li

代码中可能缺少 float: left：http://jsfiddle.net/vT5vd/

顺便说一句，列表对于菜单来说非常棒，而且几乎完全被使用！

回复收藏 0 原文

云柯 2024-12-14 08:44:18

选项卡被视为一行文本。行间距设置为文本的高度，导致较大的选项卡重叠。要纠正这个问题，只需添加一个
行高：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;
}

The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a
line-height: 1.8;
line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.

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

回复收藏 0 原文

~没有更多了~