垂直UL菜单上的垂直分隔符

我试图创build一个水平导航栏(没有下拉列表,只是一个水平列表),但我很难find在菜单项之间添加垂直分隔符的最佳方式。

实际的HTML如下所示:

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> 

目前的CSS如下:

 .menu li { display: inline; margin-left: 25px; padding-left: 25px; } 

每个菜单项之间我想要一个小的图像作为一个垂直分隔符,除了我不想在第一个项目之前显示一个分隔线,我不想在第二个项目之后显示一个分隔线。

最终的结果应该是这样的:

项目1 | 项目2 | 项目3 | 项目4 | 第5项

只需用实际的图像replacepipe道。

我尝试了不同的方式 – 我尝试设置list-style-image属性,但图像没有显示出来。 我也尝试设置分频器作为背景,实际上或多或less的工作,除了它使第一个项目前面有一个分频器。

相当简单,没有任何“必须指定第一个元素”。 CSS比大多数人想象的更强大(例如, first-child:before是伟大的!)。 但是,至less在我看来,这是迄今为止最干净最合适的方式。

 #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li:not(:first-child):before { content: " | "; } 

现在只需在HTML中使用一个简单的无序列表,它将为您填充它。 HTML应该看起来像这样:

 <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Support</a></li> </ul> </div><!-- navigation --> 

结果就像这样:

首页| 关于我们| 支持

现在,您可以无限扩展,无需担心订单,更改链接或第一个条目。 这全都是自动化的,效果很好!

试试这个,求职者:

 li+li { border-left: 1px solid #000000 } 

这只会影响李嘉欣的元素

在这里find

这也可以通过CSS:伪类来完成。 支持不是那么广泛,上面的答案给出了相同的结果,但它是纯CSS-y =)

 .ULHMenu li { border-left: solid 2px black; } .ULHMenu li:first-child { border: 0px; } 

要么:

 .ULHMenu li { border-right: solid 2px black; } .ULHMenu li:last-child { border: 0px; } 

请参阅: http : //www.quirksmode.org/css/firstchild.html
或者: http : //www.w3schools.com/cssref/sel_firstchild.asp

我认为你最好的镜头是一个border-leftborder-left属性,除了第一个border-left ,它们被分配给每一个border-left (你必须给第一个边框命名,明确的删除边框)。

即使以编程方式生成<li> ,分配first类也应该很容易。

一个简单的解决scheme是只添加#navigation ul li~li { border-left: 1px solid #857D7A; } #navigation ul li~li { border-left: 1px solid #857D7A; }

 .last { border-right: none .last { border-right: none !important; } 

我这样做,佩卡说。 在每个<li>上放置一个内联样式:

 style="border-right: solid 1px #555; border-left: solid 1px #111;" 

适当的时候起飞和rest。