在导航链接之间放置分隔线的正确方法是什么？ [复制]答案

【问题标题】：What is the proper way to put divider lines between navigation links? [duplicate]在导航链接之间放置分隔线的正确方法是什么？ [复制]
【发布时间】：2019-07-01 18:16:52
【问题描述】：

我有一个 CSS/HTML 家庭作业，要使页面看起来像我的老师给我的页面。我需要在链接之间添加“管道”。我在我的 HTML 中添加了管道字符，但我觉得这不是正确的做法。谢谢！这是它需要的截图：

https://i.imgur.com/sC7OLut.png

【问题讨论】：

没有“正确”的方式。你可以用任何你喜欢的方式来做，只要它是可维护的并且容易被其他人理解，比如可能的队友

标签： html css

【解决方案1】：

管道字符可以工作，但你可以用一些 CSS 做同样的事情。

如果你的标记是这样的：

<nav>
  <a href="/about.html">About</a>
  <a href="/portfolio.html">Portfolio</a>
  <a href="/contact.html">Contact</a>
</nav>

您可以添加一些 CSS 来为每个链接元素的“右侧”设置边框，但最后一个元素除外，因为您不希望在链接末尾有浮动分隔线。

nav > a {
  border-right: solid 1px #eff0f1;
}
nav > a:last-of-type {
  border-right: none;
}

这将在所有导航链接的右侧添加一个边框，但随后会覆盖最终的导航链接，使其没有右边框。

【讨论】：

【解决方案2】：

您希望将 border-right 添加到您的导航项目。这一切都可以通过 CSS 而没有文本来完成，就像使用管道“|”一样。只需要确保最后一个导航项没有border-right。请看下面的例子，干杯。

ul {
  list-style-type: none;
  display: flex;
}

li {
  border-right: 1px solid lightgray;
  padding: 1rem;
}

/* This is the important piece */
li:last-of-type {
  border-right: none;
}

<nav>
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</nav>

【讨论】：