2

嗨，当我写作时，我在导航栏上圆角时遇到了麻烦 - border-radius: 15px; 它环绕了所有角落，<a>但我只想圆形，<li>所以只有整个工具栏的边距。

这是一个小提琴。

谢谢

编辑

只希望 home 和 contact 被四舍五入

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;
}

这是更新的小提琴。

于 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

添加两个新类；一个圆左角和一个圆右角，并将它们分别应用于第一个和最后一个元素。

小提琴

.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

链接更新 - http://jsfiddle.net/HYhBe/24/

ul#list-nav li -> 浮动：左 & 溢出：隐藏；

您可以删除显示内联。li 是块级元素。

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

-- 对于更新的问题 --

从 'ul#list-nav li a' 中删除边框半径属性并添加到您的 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 回答