在导航链接之间放置分隔线的正确方法是什么?

时间:2019-07-01 18:16:52

标签: html css

我有一个CSS / HTML作业,以使页面看起来像老师给我的页面。我需要在链接之间添加“管道”。我在HTML中添加了管道字符,但我觉得这不是正确的方法。谢谢!这是它的外观截图:

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

2 个答案:

答案 0 :(得分:0)

您要为导航项添加 border-right 。可以使用CSS而不用文本完成所有操作,例如使用管道“ |”。只需确保最后一个导航项没有边框。参见下面的示例,欢呼。

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>

答案 1 :(得分:0)

管道字符可以工作,但是您可以使用一些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;
}

这将在所有导航链接的右侧添加边框,但是会覆盖最终的导航链接以使其没有右侧边框。