我有一个CSS / HTML作业,以使页面看起来像老师给我的页面。我需要在链接之间添加“管道”。我在HTML中添加了管道字符,但我觉得这不是正确的方法。谢谢!这是它的外观截图:
答案 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;
}
这将在所有导航链接的右侧添加边框,但是会覆盖最终的导航链接以使其没有右侧边框。