CSS在每一行上隐藏第一个li分隔符 - 响应式水平css菜单

Question

有没有办法在每行的第一个元素中隐藏分隔符？

我有一个响应式水平菜单，当窗口变小时会添加额外的行。

更糟糕的是，最终用户可以在此菜单中添加和删除项目，或者只是更改菜单项的顺序。

使用first-child不是一个选项，因为它仅适用于第一行。当屏幕变得太小时，以下行将在其第一个li元素上具有分隔符。

#block-views-solutions-block{ 
  box-sizing: border-box; 
  text-transform: uppercase; 
  font-weight: bold; 
  width: 92%; 
  max-width: $maxWidth; 
  margin: 20px auto 0 auto; 
  padding: 15px 0 0 0; 
  background-color: $colorBlue;  
  .content{ 
    box-sizing: border-box;
    width: 100%; 
    overflow: hidden;
  }
  ul{ 
    margin: 0 !important; 
    padding: 0 40px; 
    text-align: center; 
  }
  li{ 
    display: inline-block; 
    padding: 0 !important;
    &:before { 
      position: relative; 
      top: 0.125em; 
      display: inline-block; 
      width: 1px; 
      height: 1em; 
      border-left: solid 2px #fff; 
      content: " "; 
    }
    &:first-child{
      &:before{ border-left: none; }
    }
  }
  a{ 
    display: inline-block; 
    padding: 0 10px; 
    color: #fff; 
    text-decoration: none;
    &:hover { 
      text-decoration: underline;
    }
  }
  h2{ 
    color: #fff;
    font-size: smaller; 
    padding-bottom: 5px;
  }
}

这里看起来很好：

不适用于第二行或以下行：

在非常小的屏幕上看起来很可怕：

我一直在这里和其他网站上尝试解决方案，但似乎都没有做到这一点。

Answer 1

我找到了解决这个问题的方法，但有几点警告：

• 该解决方案要求列表必须左对齐或右对齐，并且不能与居中的列表一起使用。
• 该解决方案要求隐藏ul元素的溢出，如果您还希望具有下拉菜单，则可能会引起问题。

解决方案本身非常简单：

• 根据您的导航是左对齐还是右对齐，使用::before或::after添加分隔符。
• 将分隔符相对于其初始位置定位，使其位于列表项之外。
• 在列表项的另一侧使用填充来为其相邻列表项的分隔符创建空间。
• 在overflow: hidden;元素上设置ul，以便隐藏容器外的所有分隔符。

Here it is in action：

ul {
  font-size: 0;
  overflow: hidden;
  padding: 0;
}

li {
  font-size: 16px;
  display: inline-block;
  margin: 0;
  padding: 0;
  color: gray;
  position: relative;
  padding-right: 2rem;
}

li::before {
  content: "|";
  position: relative;
  left: -1rem;
  font-weight: bold;
  color: black;
}

<ul>
  <li>Item 1</li>
  <li>Another Item</li>
  <li>This Is Nice</li>
  <li>Another</li>
  <li>And Another</li>
  <li>And Yet Another</li>
</ul>