在ul菜单中制作分隔符的最佳方式

Question

在我开发的这些年里，这一直是同事们的争议。在水平菜单（或标题导航栏）中，向菜单项添加分隔符的最佳方式是什么？考虑所有因素：浏览器兼容性、可维护性、美观性、菜单空间及其对响应大小的影响等。（底部附有COPE PEN）

HTML

<!-- MENU 1 -->
<div class="container">
   <p class="inline"> Using CSS border</p>
   <div class="navbar">
      <ul class="menu">
         <li><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
         <li><a href="#">Item 3</a></li>
         <li><a href="#">Item 4</a></li>
         <li><a href="#">Item 5</a></li>
      </ul>
   </div>
<div>
<!-- MENU 2 -->
<div class="container">
   <p class="inline"> Using Font Awesome in HTML</p>  
   <div class="navbar">
      <ul class="menu2">
         <li><a href="#">Item 1 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 2 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 3 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 4 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 5 </a></li>
      </ul>
   </div>
<div>
<!-- MENU 3 -->
<div class="container">
   <p class="inline"> Using Font Awesome in CSS</p>  
   <div class="navbar">
      <ul class="menu3">
         <li><a href="#">Item 1 </a></li>
         <li><a href="#">Item 2 </a></li>
         <li><a href="#">Item 3 </a></li>
         <li><a href="#">Item 4 </a></li>
         <li><a href="#">Item 5 </a></li>
      </ul>
   </div>
</div>  
<!-- MENU 4 -->
<div class="container">
    <p class="inline"> Using Font character | in CSS</p>  
    <div class="navbar">
        <ul class="menu4">
            <li><a href="#">Item 1 </a></li>
            <li><a href="#">Item 2 </a></li>
            <li><a href="#">Item 3 </a></li>
            <li><a href="#">Item 4 </a></li>
            <li><a href="#">Item 5 </a></li>
        </ul>
   </div>
</div>

每个变体的相应CSS如下。

body{
    width:100%;
}
.inline{
   width: 25%;
   float:left;
   text-align:right;
}
.navbar{
   width:800px;
   margin:10px auto;
   background:#0067A5;
   height: 40px;
}
.menu{
   text-align: center;
   width: 100%;
   padding: 0;
}
.menu li{
   list-style-type: none;
   display: inline-block;
   padding: 10px;
}
.menu li a{
   color:#fff;
   text-transform: uppercase;
   text-decoration:none;
   border-right: 1px solid #fff;
   padding: 0px 20px 0px 0px;
}
.menu li:last-child a{
   border:none;
}

/*****   MENU 2 ********/
.menu2{
    text-align: center;
    width: 100%;
    padding: 0;
}
.menu2 li{
    list-style-type: none;
    display: inline-block;
    padding: 10px;
}
.menu2 li a{
    color:#fff;
    text-transform: uppercase;
    text-decoration:none;
}
.menu2 .fa-minus {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   margin: 0px -10px 0 5px;
}
/*****   MENU 3 ********/
.menu3{
   text-align: center;
   width: 100%;
   padding: 0;
}
.menu3 li{
   list-style-type: none;
   display: inline-block;
   padding: 10px;
   position:relative;
}
.menu3 li a{
   color:#fff;
   text-transform: uppercase;
   text-decoration:none;
}
.menu3 li a:after{
   position:absolute;
   font-family: FontAwesome;
   top:10px;
   left:66px;
   content: "f068";
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
}
.menu3 li:last-child a:after{
    content:"";
}

/*****   MENU 4 ********/
.menu4{
    text-align: center;
    width: 100%;
    padding: 0;
}
.menu4 li{
    list-style-type: none;
    display: inline-block;
    padding: 10px;
    position:relative;
}
.menu4 li a{
    color:#fff;
    text-transform: uppercase;
    text-decoration:none;
}
.menu4 li a:after{
    position:absolute;
    font-family: Roboto;
    top:6px;
    left:72px;
    content: "|";
}
.menu4 li:last-child a:after{
    content:"";
}

如果你还有其他想法，我愿意接受。在我看来，这些都不是"错误的"，它们都是有效的。然而，还有什么更实用呢？优点和缺点是什么（特别是缺点）。在我看来，整个分隔器的概念是非常早期的网页设计时代（2000年代），但一些客户仍然更喜欢它

此处工作副本

Answer 1

我肯定会尽可能使用字形（选项4）。我会使用:before而不是:after。你用它赢得了一个IE（7或8）版本。始终确保使用unicode版本的字形，就像在选项3中所做的那样。如果您只是使用一个键盘字符，您应该意识到它可能无法被其他键盘布局（代码页）识别。

查阅unicode表示法，我发现csstricks非常有用。如果不能使用字形，可以创建自定义字体。弄清楚所有内容需要一些时间，但一旦弄清楚了，就可以重新使用unicode中的css内容了。因此，imho你有所有的字形选项（阴影，边框，字体大小，颜色，额外的背景，响应能力，…）

交易破坏者：

• 选项1：锚文本/填充不居中，这可能会在以后引入响应问题。此外，您很可能需要:first-child和/或:last-child选择器，以再次添加部分浏览器支持
• 选项2：需要额外的语义来限制HTML
• 选项3：类似于我的备份计划，如果我不能使用字形。基本支持可以追溯到IE8。通过一些特殊处理，您可以将其用于IE7

不幸的是，竖线/竖线没有列在csstricks上。另一个消息来源告诉我是content: '0007C'。

Answer 2

一开始，使用边界似乎是个好主意，如果只有一个级别的元素，那么它们就是好主意，但一旦你开始用锚和图像之类的东西嵌套多个级别，并具有悬停/背景之类的效果。。。你开始得到不想要的结果。正因为如此，我发现自己使用:after作为分频器。