gpt4 book ai didi

html - 在菜单中定位 css 分隔线的问题

转载 作者:行者123 更新时间:2023-11-28 13:34:22 25 4
gpt4 key购买 nike

我有一个一直无法解决的 CSS 问题。基本上,我有一个固定宽度和高度的菜单。菜单的背景只是一个图形,有一个灰色条,下面有一个阴影。这是该菜单的 CSS:

  #menu
{
width:1024px;
height:63px;
background: url(../images/menuholder.jpg);
margin:0px;
}

我有一个控制菜单选项的 CMS,但是对于这个例子,我对它们进行了硬编码。我正在使用 CSS 将元素垂直放置在正确的位置,在灰色条上方,垂直居中,这很好。这是问题所在:我试图在每个菜单选项之间放置一条 1px 宽的白色 (#fff) 线。我宁愿完全通过 CSS 而不是使用保存的图像来完成此操作。我能够使用这段代码(某种程度上)做到这一点:

<div id="menu">
<div id="upperNavLinks">
<ul>
<li style="border-right: 1px solid #fff;"><a href="Option1.aspx" target="_self">Option 1</a></li>
<li style="border-right: 1px solid #fff;"><a href="Option2.aspx" target="_self">Option 2</a></li>
<li style="border-right: 1px solid #fff;"><a href="Option3.aspx" target="_self">Option 3</a></li>
<li style="border-right: 1px solid #fff;"><a href="Option4.aspx" target="_self">Option 4</a></li>
<li style="border-right: 1px solid #fff;"><a href="Option5.aspx" target="_self">Option 5</a></li>
</ul>
</div>
</div>

它背后的css是:

#upperNavLinks
{
float:left;
padding-top:0px;
padding-left:0px;
}

#upperNavLinks ul
{
list-style-type:none;
}

#upperNavLinks ul li
{
float:left;
}

#upperNavLinks ul a {
padding-right: 18px;
padding-left: 18px;
display: block;
text-decoration: none;
font-family:PT Sans, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight:bold;
color: #333333;
}

#upperNavLinks ul a:hover
{
font-weight:bold;
color: #a31624;
}

问题是,它会在我想要的地方生成一条白线,但是我需要它从灰色条的顶部开始,然后向下延伸到灰色条的底部,但不能超过阴影。灰色条的大小(垂直)为:44px。

所以,我的问题是:如何使白线锁定到灰色条的顶部,并覆盖灰色条上方 44px(但不超过)的垂直空间,同时让实际的菜单选项 float 像现在一样在图形的中心?

如果这没有任何意义,我可以在某处发布实际的图形和代码。

最佳答案

在每个带有 anchor 的 li 之间,放置另一个 li,现在有一个类(我将其命名为 border)。给那个类一个 display: block;,一个 width: 1px; 和一个 height: 20px;。现在你可以玩高度了获得您想要的效果。

http://jsfiddle.net/skeurentjes/4hJrb/1/

关于html - 在菜单中定位 css 分隔线的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13160837/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com