水平 UL 菜单上的垂直分隔线答案

【问题标题】：Vertical dividers on horizontal UL menu水平 UL 菜单上的垂直分隔线
【发布时间】：2020-07-11 15:21:25
【问题描述】：

我正在尝试创建一个水平导航栏（没有下拉菜单，只有一个水平列表），但我找不到在菜单项之间添加垂直分隔线的最佳方法。

实际的HTML如下：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

目前的CSS如下：

.menu li {
  display: inline;
  margin-left: 25px;
  padding-left: 25px;
}

在每个菜单项之间我想要一个小图像作为垂直分隔符，除了我不希望在第一项之前显示分隔符并且我不希望在第二项之后显示分隔符。

最终结果应该是这样的：

第 1 项 |项目 2 |项目 3 |项目 4 |第 5 项

只需将管道替换为实际图像即可。

我尝试了不同的方法 - 我尝试设置 list-style-image 属性，但图像没有显示。我还尝试将分隔线设置为实际上或多或少起作用的背景，只是它使第一项在其前面有一个分隔线。

【问题讨论】：

标签： html css markup

【解决方案1】：

相当简单，没有任何“必须指定第一个元素”。 CSS 比大多数人想象的更强大（例如，first-child:before 很棒！）。但这是迄今为止最干净、最正确的方法，至少在我看来是这样。

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

现在只需在 HTML 中使用一个简单的无序列表，它就会为您填充它。 HTML 应如下所示：

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

结果将是这样的：

首页 |关于我们 |支持

现在您可以无限扩展，而不必担心顺序、更改链接或您的第一个条目。这一切都是自动化的，效果很好！

【讨论】：

你先生真棒。这种方法对我很有效。由于都是用 CSS 完成的，如果我需要进行更改，这将非常简单。
你考虑过:not(:first-child):before
注意最后两条规则可以合并为一条：#navigation li + li:before { content: " | "; }

【解决方案2】：

试试这个，探索者：

li+li { border-left: 1px solid #000000 }

这只会影响相邻的 li 元素

找到here

【讨论】：

这太棒了！

【解决方案3】：

这也可以通过 CSS:pseudo-classes 来完成。支持不是很广泛，上面的答案给你同样的结果，但它是纯 CSS-y =)

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

或者：

.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }

见：http://www.quirksmode.org/css/firstchild.html
或：http://www.w3schools.com/cssref/sel_firstchild.asp

【讨论】：

【解决方案4】：

我认为您最好的方法是分配给 lis 除第一个之外的每个 border-left 属性（您必须为第一个提供一个名为 first 的类并明确删除边框为此）。

即使您以编程方式生成<li>，分配first 类也应该很容易。

【讨论】：

依赖CSS 2.1 Selectors 并使用ul > li:first-child 定位第一个元素而不添加任何额外标记甚至是安全的。
只是还指出他要求的是图像分隔线而不是侧边框，但基本上是相同的想法（给<li> 提供背景图像）

【解决方案5】：

更简单的解决方案是添加#navigation ul li~li { border-left: 1px solid #857D7A; }

【讨论】：

【解决方案6】：

.last { border-right: none

.last { border-right: none !important; }

【讨论】：

【解决方案7】：

这对我来说很好用：

注意我正在使用 ~~BEM/OCSS~~ SCSS 语法

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}

【讨论】：

【解决方案8】：

我按照佩卡的说法去做。在每个 <li> 上放置一个内联样式：

style="border-right: solid 1px #555; border-left: solid 1px #111;"

酌情先和最后起飞。

【讨论】：