[分享]css中导航栏两边短竖线

CSS中导航栏两边短竖线是一个比较常见的设计，在一些网站中可以看到这个元素的使用，可以让整个导航栏看起来更加有层次感。下面我们来看一下如何实现导航栏两边短竖线的效果。.nav{ display: fl...

CSS中导航栏两边短竖线是一个比较常见的设计，在一些网站中可以看到这个元素的使用，可以让整个导航栏看起来更加有层次感。下面我们来看一下如何实现导航栏两边短竖线的效果。

.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.nav a{
    padding: 0 10px;
}

.nav a:first-child{
    border-left: none;
}

.nav a:last-child{
    border-right: none;
} 

上面的代码中，我们首先将nav元素设为flex布局，这样可以让导航栏中的元素在水平方向上有了一定的自由度。justify-content: space-between;属性则可以将nav元素中的元素平均分配到两端。

接下来我们为nav元素的左右两边添加了边框，这样就实现了导航栏两边短竖线的效果。但是这样会导致第一个和最后一个a元素的左右边框重叠在一起，因此我们为第一个和最后一个a元素分别添加了border-left: none;和border-right: none;属性，去掉了它们的左右边框。

通过上面的代码，我们就可以轻松的实现导航栏两边短竖线的效果。如果需要更改导航栏的样式，只需要修改CSS代码即可。这个设计虽然简单，但是却可以让导航栏更加美观，提升用户使用体验。