Question

当我写信时，我的导航栏上的角落很麻烦 - border-radius: 15px;围绕<a>的所有角落<li>，但我只希望围绕{{1}}，而只需要整个工具栏的边距。

这是fiddle。

感谢

修改

只想要回家和联系方式

Answer 1

这也有效：

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

Here is the updated fiddle

Answer 2

围绕第一个和最后一个li元素的角。试试

:first-child and :last-child selectors

查看现场演示：http://jsfiddle.net/HYhBe/33/

Answer 3

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

Fiddle

.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>

Answer 4

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

ul＃list-nav li - ＆gt; float：left＆amp;溢出：隐藏;

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

ul#list-nav li {
   border-radius: 15px; 
   float:left;
   overflow:hidden;
}

Answer 5

- 有关更新的问题 -

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

圆角导航栏

5 个答案: