css导航栏竖线高度

在设计网站时，导航栏是很重要的一个部分。为了让导航栏更美观，我们经常会加上竖线的装饰。那么，在CSS中如何控制导航栏竖线的高度呢？

.navbar {
    border-right: 1px solid #000;
    height: 60px;
}
.navbar li {
    display: inline-block;
    padding: 0 20px;
    line-height: 60px;
}
    

在上面的代码中，我们给导航栏添加了一个1像素宽度的实线，这就是竖线。同样，我们也设置了导航栏的高度，让竖线在适当的位置。如果你想改变竖线的高度，只需要改变.navbar的height属性即可。

在.li的样式中，我们将每个导航项以inline-block的形式排列，并设置了与竖线等高的行高。这就完成了竖线与导航项对齐的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！