舍入角落的导航栏

嗨林有麻烦我的导航栏，当我写上四舍五入的角落 - border-radius: 15px;这一轮所有<a>的角落，但我只想一轮<li>所以只有整个工具栏的利润率。舍入角落的导航栏

这是fiddle。

感谢

编辑

只想回家和接触要舍

来源

2012-06-05 ppaul

SRY基因，但既不是你的问题，你也捣鼓是精确到足以表明你真正想要的...... – Christoph

怎么可以，你为什么要能圆'li'而不是'a'？它在你的小提琴中是一样的。 – Asif

更新了我的问题 – ppaul

这也适用于：

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。

来源

2012-06-05 13:55:40 Asif

只想回家和联系四舍五入？谢谢 – ppaul

看到更新的小提琴 – Asif

@ppaul你有没有得到你想要的？ – Asif

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

UL＃列表导航李 - >浮动：左&溢出：隐;

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

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

来源

2012-06-05 13:47:01

只想回家和联系四舍五入？ – ppaul

- 有关更新的问题 -

拆除“UL＃列表导航李一”边界半径财产和添加到您的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-05 14:00:06

添加两个新类;一个围绕左角，另一个围绕右角并分别应用于第一个元素和最后一个元素。

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>

来源

2012-06-05 14:01:28 Maehler

为了圆第一个和最后一个li元素的角落。尝试

:first-child and :last-child selectors

退房的现场演示：http://jsfiddle.net/HYhBe/33/

来源

2012-06-05 14:05:10 Brad

舍入角落的导航栏

回答

相关问题