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年代），但一些客户仍然喜欢它。

WORKING COPY HERE

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上列出。另一个source告诉我它是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;
}

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

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

3 个答案: