要实现的效果如图所示:
这里没有什么难点,只是感觉这种布局使用挺多的,纪录一下,方便以后使用。
曾经想过的思路:
- 添加相同的
<li><a href="#">|</a></li>
标签,
但是元素间距离会变大,因为|占据同等宽度 - 给元素添加右边框,
审查元素发现,元素高度跟导航栏一样高,所以|会跟导航栏一样高 - 最终用伪元素实现了想要的效果
`.navbar-right li:after {
content: '';
position: absolute;
width: 1px;
height: 14px;
background-color: #a4a4a4;
top:18px;
right: 0;
}