在 ul 菜单中制作分隔线的最佳方法

Question

在我开发的这么多年里，这一直是同行们争论的焦点。向水平菜单（或 header 导航栏）中的菜单项添加分隔线的最佳方法是什么？考虑所有因素：浏览器兼容性、可维护性、美观性、菜单space及其对响应大小的影响等。（底部附有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:"";
}

如果你有任何其他想法，我很乐意接受他们。在我看来 none 实际上是 "wrong" per-se，它们都有效。但是，什么会更实用？有什么优点和缺点（特别是缺点）。在我看来，整个分隔线概念是非常早期的网页设计时代（2000 年代），但一些客户仍然喜欢它。

WORKING COPY HERE

Answer 1

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

查找 unicode 表示法，我发现 csstricks 非常有用。如果您不能使用字形，则可以创建自定义字体。弄清楚所有内容需要花费一些时间，但一旦您弄清楚了，您就会回到使用 unicode 中的 css 内容。因此，恕我直言，您拥有字形的所有选项（阴影、边框、字体大小、颜色、额外背景、响应速度……）

交易破坏者：

选项 1：锚点 text/padding 未居中，稍后可能会引入响应问题。您也很有可能需要一个 :first-child and/or :last-child 选择器，它再次添加了部分浏览器支持。
选项 2：需要额外的语义，这会污染您的 HTML。
选项 3：类似于我不能使用字形时的备用计划。基本支持可追溯到 IE8。经过一些特殊处理，您可以将其用于IE7。

现在不幸的是 pipline/vertical 栏没有在 css 技巧中列出。另一个 source 告诉我它是 content: '[=14=]007C'.

Answer 2

起初使用边框似乎是个好主意，如果只有一层元素，它们就是这样，但是一旦你开始用锚点和图像等东西嵌套多个层次并产生像 hovers/backgrounds ...你开始得到不想要的结果。因此，我发现自己使用 :after 作为分隔符。

在 ul 菜单中制作分隔线的最佳方法

Best way to make dividers in ul menus

html

css

usability

menu