0

我有一个带有不透明度过渡的导航栏。我设置它的方式是我有一个黑色背景颜色的 .rounded 类，最重要的是，我将 li 定位在 ul 中，添加图像图形和过渡。最后我有一个 li:hover，改变不透明度（显示为 .rounded。）

我的问题是，由于某种原因，主要的 .rounded 类有一个黑条伸出，如图所示：http://i.imgur.com/zUYiHss.png

这是我的完整代码：http: //jsfiddle.net/YVTBt/

HTML的导航栏部分：

<ul class="rounded"> <!-- Navbar-->
      <li class="sideBarButton">
        <a href="../www.google.com">
         Home
        </a>
      </li>
      <li class="sideBarButton">
        <a href="../www.google.com">
         About
        </a>
      </li>
           <li class="sideBarButton">
        <a href="../www.google.com">
            Download
        </a>
      </li>
        <li class="sideBarButton">
        <a href="../www.google.com">
         Screenshots
        </a>
      </li>
      <li class="sideBarButton">
        <a href="../www.google.com">
         Licence
        </a>
      </li>
           <li class="sideBarButton">
        <a href="../www.google.com">
            Others' Stuff
        </a>
      </li>
      <li class="sideBarButton">
        <a href="../google.com">
            Support This
        </a>
      </li>
      <li class="sideBarButton">
        <a href="../google.com">
            About Me
        </a>
      </li>
        <li class="sideBarButton">
        <a href="../google.com">
            Help
         </a>
      </li>
    </ul> <!--- Navbar-->

CSS的相关部分：

.rounded > li:first-child
{
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    background-image: url(woodbutton.gif);
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
    z-index: 1;
}
.rounded > li:last-child
{
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background-image: url(woodbutton.gif);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    z-index: 1;
}
.rounded>li:not(:first-child):not(:last-child) {
    background-image: url(woodbutton.gif);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    z-index: 1;
}

不过，我强烈建议您看一下小提琴。我这几天一直在纠结这个问题，有什么帮助吗？

4

2 回答 2

0

显然，用户代理样式表ul默认为元素添加了一些左填充。

在这种特殊情况下，您可以通过设置重置它

.rounded {
  padding: 0
}

请参阅更新的小提琴

于 2013-11-02T17:32:20.343 回答
0

尝试删除类position:absolute上的标签.rounded。

见http://jsfiddle.net/damoiser/5Nurg/

然后，你可以background-color在lis 元素上放一些。

于 2013-11-02T17:37:20.763 回答