0

不透明度遷移のあるナビゲーションバーがあります。私が設定した方法は、背景色が黒の .rounded クラスがあり、その上に、ul の li をターゲットにして、画像のグラフィックとトランジションを追加することです。最後に、不透明度を変更する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 に答える