在網頁設計中，導航欄是頁面的核心組成部分之一。一些網站設計師經常使用帶有垂直線的導航欄，使其看起來更加美觀和專業。那么，如何使用CSS來創建具有帶有豎線的導航欄呢？

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
margin: 0 10px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: #000;
font-weight: bold;
}
.navbar ul li:before {
content: "";
height: 100%;
width: 1px;
background-color: #eee;
position: absolute;
left: -10px;
top: 0;
}

我們使用了display屬性的彈性盒子模型來創建容器和菜單項。菜單項的位置使用相對定位，以便在容器中創建一個伸展到豎線的方形。要創建豎線，我們使用:before偽元素在每個菜單項的左側創建一個1像素寬的div。

使用這種方法創建帶有豎線的導航欄，可以使您的網站看起來更加優雅和專業，并為您的用戶提供更好的用戶體驗。