如何在导航栏中添加此垂直分隔线？

Question

我需要创建这种分隔符（浏览和头像之前的垂直线）。我不想使用图像，所以有没有办法在CSS中制作？

我试过了：

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

Answer 1

css应该应用于浮动的div，而不是hr标记。

hr无法垂直应用Is there a vr (vertical rule) in html?。

您只需设置border-left并添加边框颜色，因为代码中缺少边框颜色，您还可以添加左边距以获得更好的视图：

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

或创建一个类，因为你需要两个div：

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

并将其添加到您的菜单容器和头像容器部门

Answer 2

您可以使用：之前

.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}

Answer 3

如果您的“浏览”按钮的容器较大，您可能会获得更长的边框。在这种情况下，您可以简单地尝试“|” （“管道”）在“浏览”按钮之前的范围内，并根据需要设置样式。在这种情况下，您不必使用大量的CSS样式。