2

こんにちは私が書くとき、ナビゲーションバーの角を丸めるのに問題があります- border-radius: 15px; それはすべての角を丸めますが、ツールバー全体の余白<a>だけを丸めたいのです。<li>

これがフィドルです。

ありがとう

編集

家と連絡先を丸めたいだけ

4

5 に答える 5

6

これも機能します：

ul#list-nav li {
   border:2px solid blue;
   float:left;
   overflow:hidden;
}

li.first{
   border-top-left-radius:15px;
   border-bottom-left-radius:15px;
}
li.last{
    border-top-right-radius:15px;
   border-bottom-right-radius:15px;
}

これが更新されたfiddleです。

于 2012-06-05T13:55:40.253 に答える
2

最初と最後のli要素の角を丸めます。試す

:first-child and :last-child selectors

ライブデモをチェックしてください：http ：//jsfiddle.net/HYhBe/33/

于 2012-06-05T14:05:10.043 に答える
1

2 つの新しいクラスを追加します。左隅を丸くするものと右隅を丸くするものをそれぞれ最初と最後の要素に適用します。

フィドル

.round_left {
    border-radius: 15px 0 0 15px;   
}

.round_right {
    border-radius: 0 15px 15px 0;   
}

<ul id="list-nav">
    <li><a href="#" class="round_left">HOME</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">GALLERY</a></li>
    <li><a href="#">THE WAY WE WORK</a></li>
    <li><a href="#" class="round_right">CONTACT</a></li>
</ul>
于 2012-06-05T14:01:28.013 に答える
0

-更新された質問の場合-

'ul＃list-nav li a'からborder-radiusプロパティを削除し、CSSファイルに追加します。

ul#list-nav li:first-child a{ border-radius: 15px 0 0 15px;} 
ul#list-nav li:last-child a{ border-radius: 0 15px 15px 0;}
于 2012-06-05T14:00:06.187 に答える
0

リンクが更新されました-http://jsfiddle.net/HYhBe/24/

ul＃list-nav li-> float：left＆overflow：hidden;

インライン表示を削除できます。liはブロックレベルの要素です。

ul#list-nav li {
   border-radius: 15px; 
   float:left;
   overflow:hidden;
}
于 2012-06-05T13:47:01.283 に答える