Html 水平 UL 菜单上的垂直分隔线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1936661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical dividers on horizontal UL menu
提问by Michael L
I'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.
我正在尝试创建一个水平导航栏（没有下拉菜单，只是一个水平列表），但我无法找到在菜单项之间添加垂直分隔线的最佳方法。
The actual HTML is as follows:
实际的 HTML 如下：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
The current CSS is as follows:
当前的 CSS 如下：
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
Between each menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't want a divider shown after the second item.
在每个菜单项之间，我想要一个小图像作为垂直分隔线，除了我不希望在第一个项目之前显示一个分隔线，并且我不希望在第二个项目之后显示一个分隔线。
The end result should look something like this:
最终结果应该是这样的：
Item 1 | Item 2 | Item 3 | Item 4 | Item 5
第 1 项 | 第 2 项 | 第 3 项 | 第 4 项 | 第 5 项
Just replacing the pipe with an actual image.
只需用实际图像替换管道即可。
I've tried different ways - I've tried setting the list-style-imageproperty, but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.
我尝试了不同的方法 - 我尝试设置list-style-image属性，但图像没有显示。我还尝试将分隔线设置为背景，这实际上或多或少有效，只是它使第一个项目在其前面有一个分隔线。
回答by David Cahill
Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:beforeis great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.
相当简单，没有任何“必须指定第一个元素”。CSS 比大多数人想象的更强大（例如，first-child:before很棒！）。但这是迄今为止最干净、最合适的方法，至少在我看来是这样。
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li:not(:first-child):before {
content: " | ";
}
Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:
现在只需在 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 -->
The result will be just like this:
结果将是这样的：
HOME | ABOUT US | SUPPORT
首页 | 关于我们 | 支持
Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!
现在，您可以无限扩展，而不必担心订单、更改链接或您的第一个条目。这一切都是自动化的，而且效果很好！
回答by vladkras
回答by Campbeln
This can also be done via CSS:pseudo-classes. Support isn't quite as wide and the answer above gives you the same result, but it's pure CSS-y =)
这也可以通过 CSS:pseudo-classes 来完成。支持不是很广泛，上面的答案给了你相同的结果，但它是纯 CSS-y =)
.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }
OR:
或者：
.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }
See: http://www.quirksmode.org/css/firstchild.html
Or: http://www.w3schools.com/cssref/sel_firstchild.asp
请参阅：http: //www.quirksmode.org/css/firstchild.html
或：http: //www.w3schools.com/cssref/sel_firstchild.asp
回答by Pekka
I think your best shot is a border-leftproperty that is assigned to each one of the lis except the first one (You would have to give the first one a class named firstand explicitly remove the border for that).
我认为您最好的镜头是border-left分配给li除第一个之外的每个s的属性（您必须为第一个指定一个类，first并为此明确删除边框）。
Even if you are generating the <li>programmatically, assigning a firstclass should be easy.
即使您以<li>编程方式生成，分配first类也应该很容易。
回答by newbie
A simpler solution would be to just add #navigation ul li~li { border-left: 1px solid #857D7A; }
一个更简单的解决方案是添加 #navigation ul li~li { border-left: 1px solid #857D7A; }
回答by Scott
.last { border-right: none
.last { border-right: none !important; }
回答by Satu
This works fine for me:
这对我来说很好用：
NB I'm using BEM/OCSSSCSS Syntax
注意我正在使用BEM/OCSSSCSS 语法
#navigation{
li{
&:after{
content: '|'; // use content for box-sizing
text-indent: -999999px; // Hide the content
display: block;
float: right; // Position
width: 1px;
height: 100%; // The 100% of parent (li)
background: black; // The color
margin: {
left: 5px;
right: 5px;
}
}
&:last-child{
&:after{
content: none;
}
}
}
}
回答by Martin
I do it as Pekka says. Put an inline style on each <li>:
我按照佩卡说的去做。在每个上放置一个内联样式<li>：
style="border-right: solid 1px #555; border-left: solid 1px #111;"
Take off first and last as appropriate.
根据需要首先起飞和最后起飞。
