css制作导航栏分割线 |css calc

/* 纵向分割线 */
.nav-item:not(:last-child)::after {
content: '';
height: 16px;
margin: 0 8px;
border-right: 1px solid #ccc;
display: inline-block;
vertical-align: middle;
}

在实现纵向分割线时，大家需要遍历除最后一个导航栏元素之外的所有元素，并且在其右侧添加一个默认隐藏的行内块级元素After伪类。通过设定其边框、高度，以及右侧间距的宽度，便可实现纵向分割线。

/* 横向分割线 */
.nav-list {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
}
.nav-item {
padding: 8px 0;
}

而在实现横向分割线时，大家可以通过将导航栏元素父容器设为flex布局，让其自然地平铺于横向中央，并将容器的下边框渲染为细线，为其添加一个距离底部8px的padding，让分割线有所缩进。同时，将导航栏元素设为不同的左右边距，即可在其间添加横向分割线。

总的来说，通过CSS的优美设计，可以加强导航栏组件的整体美观性与可读性，相信在不久的将来，CSS会成为网页设计领域中最重要的工具之一。