Question

我有一个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（而不是上方）的垂直空间，同时保留实际的菜单选项浮动在现在的图形中心？

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

Answer 1

在每个带有锚点的li之间，放置另一个li，现在有一个类（我将其命名为border）。为该课程提供display: block;，width: 1px;和height: 20px;。现在您可以使用高度来获得您想要的效果。

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

Answer 2

放置空

的语义含义是什么？ Personaly我会使用背景图像来做这样的事情，而不是创建空标签。

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

2 个答案: