Navbar border left&正确的问题

时间:2014-07-07 14:57:24

标签: css css3 twitter-bootstrap

我今天真的很难过,我正在尝试重新创建这个Navbar:

http://www.autotrader.co.uk/

现在,如果你看一下,它的边界左边和边框右边是“购买”链接。在深入了解CSS后,我已经弄清楚他们是如何做到这一点的。他们有这个HTML:

<ul class="navmain_holder">
</ul>

开发人员在该元素的左侧添加了一个边框,以便在导航栏的开头创建边框。

现在,如果你看一下我网站的这个实时标题示例:

http://www.dealerbyte.co.uk/

边框设置在左边但是如果你查看“获取财务”链接,我就无法为其添加右边框,因为所有其他元素都将获得该边框,这将导致某些边框出现2px厚而不是一个,当我使用Bootstrap时,响应式CSS阻止我在某些方面解决这个问题。

对不起,我没有真正解释过我的问题,希望有人能理解,任何帮助将不胜感激:)

1 个答案:

答案 0 :(得分:4)

您可以使用以下选择器选择最后一个元素:

ul.nav > li:last-child {
  border-right: 1px solid #475d88;
}

它仅选择最后一个li元素。祝你好运!

编辑这是Harry的演示小提琴:http://jsfiddle.net/hari_shanx/D2JzN/

编辑正如Pete指出的那样,您也可以将border-left添加到外部ul元素,并将border-right应用于所有{{1}元素。值得指出的是,如果你想支持IE8,我相信不支持li选择器。所以你可能不得不走这条路,但从我的测试来看,你似乎并没有尝试支持IE8,这可能对你的理智更好。 :)