0

我有一个我一直无法弄清楚的 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（而不是超过）垂直空间，同时让实际菜单选项浮动在中心像现在这样的图形？

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

4

2 回答 2

0

放置空的语义含义是什么

  • 的？就个人而言，我会使用背景图片来做这样的事情，而不是创建空标签。

    • 于 2012-10-31T15:42:58.513 回答
    0

    在每个li带锚点之间，放置另一个li，现在有一个类（我将其命名为边框）。给那个类 a display: block;， awidth: 1px;和 a height: 20px;。现在你可以使用高度来获得你想要的效果。

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

    于 2012-10-31T15:32:49.863 回答