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 添加分隔符，具体取决于您的导航是左对齐还是右对齐。
• 相对于其初始位置定位分隔符，使其位于列表项之外。
• 在列表项的另一侧使用填充为其相邻列表项的分隔符创建空间。
• 在 ul 元素上设置 overflow: hidden; 以便隐藏任何落在容器外的分隔符。

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>