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，以便隐藏容器外部的所有分隔符。

这是在行动：

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>