css - 如何在导航栏中添加这个垂直分隔线？

Question

我需要创建这种分隔线(浏览和头像之前的垂直线)。我不想用图片，有没有办法用css制作？

我试过:

.hr_v {
    width: 1px;
    height: 80px;
    border: 0;
    border-left: 1px solid;
    color: gray;
    background-color: gray;
}

Answer 1

CSS 应应用于 float 的 div，而不是 hr 标签。

hr不能垂直应用Is there a vr (vertical rule) in html? .

您只需要设置 border-left 并添加边框颜色，因为您的代码中缺少它，您还可以添加左填充以获得更好的 View :

#floatingAvatarDiv
{    
   border-left: 1px solid gray;
   padding-left: 2px;
}

或者创建一个类，因为两个 div 都需要它:

.leftBorderDiv
{    
       border-left: 1px solid gray;
       padding-left: 2px;
}

并将其添加到您的菜单容器和头像容器分区