0

ナビバーを作っています。これが私の望みです。

background-colorホバーするときにリンクの を変更します。最初と最後のリンクの背景は角を丸くする必要があります。

問題は、すべてのリンクの角が丸くなっているか、丸くなっているリンクがないかのどちらかです!

CSS

   nav {
       width:100%;
       line-height:2;
   }
   nav ul {
       list-style:none;
   }
   nav li a {
       text-decoration:none;
       color:white;
       float:left;
       width:90px;
       display:block;
       background-color:blue;
       padding-left:10px;
   }
   nav li a:first-child {
       border-radius:5px;
   }
   nav li a:last-child {
       border-radius:5px;
   }
   nav li a:hover {
       color:blue;
       background-color:white;
   }

HTML

<nav>
    <ul>
        <li><a href="#">Hem</a>
        </li>
        <li><a href="#">om oss</a>
        </li>
        <li><a href="#">hitta hit</a>
        </li>
        <li><a href="#">Kontakta</a>
        </li>
    </ul>
</nav>
4

1 に答える 1

2

あなたが探しているのは、このようなものですか？

http://jsfiddle.net/gespinha/mkDWj/2/

ali要素内の first と lastではなく、 first と lasta内でをトリガーする必要があります。lilia

あなたの他の問題は、エッジの境界線に半径の値を持たせたいだけのときに、すべての境界線に同じ radius を割り当てることでした。

CSS

nav li:first-child a {
    border-radius:5px 0 0 5px;
}
nav li:last-child a {
    border-radius:0 5px 5px 0;
}

border-radius 属性の詳細については、このドキュメントhttp://www.w3schools.com/cssref/css3_pr_border-radius.aspを確認してください。

于 2013-09-18T14:12:24.377 に答える