在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你有所有的字形选项（阴影，边框，字体大小，颜色，额外的背景，响应，......）

dealbreakers：

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

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

Answer 2

首先使用边框似乎是一个好主意，如果只有一个级别的元素，它们就是，但是一旦你开始嵌套多个级别的东西，如锚点和图像，并具有像悬停/背景的效果......你开始得到不希望的结果。 因此，我发现自己使用:after使用分隔符。

Answer 3

我会这样做：

      <ul class="menu">
         <li class="first"><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>

CSS：

li {
  border-left: 1px solid ...;
}
li.first {
  border-left: none;
}

在所有浏览器上都可以轻松实现...希望这会有所帮助。