Html 带有短垂直线的CSS样式导航栏

如上所述，我试图得到标题中描述的结果，但为了更好地解释，这里是我的想法。我尝试了这里提供的基本css，但我的期望略有不同。 当前成果：

HTML代码：

---

HTML这很简单，你甚至不需要vl类的div，我的想法是你把垂直线的div放在右边，但是没有必要，你可以用css属性

边框右边的那条线


nav-ul{
列表样式：无；
显示器：flex；
填充：10px 15px；
边界半径：10px；
边框：1px实心#333；
}
导航ul li{宽度：100%；文本对齐：中心；}
nav ul li:不是（：最后一个孩子）{右边框：1px实心#888；}
nav ul LIA{文字装饰：无；颜色：#333；}















分享你的html代码会有帮助：DCU也可以分享html，并创建它的一个片段吗？嗨，对不起。Stack反对我：）我不得不上传图片，但至少不会太长：）谢谢！为什么要在代码中添加带有vl类的div？很抱歉，我试图自己找出行，所以我创建了额外的div，但是它没有连接如果这对您有帮助，请不要忘记标记正确的答案
nav {
  width: 1300px auto;
  max-width: 1300px;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 60px 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  border-width: 3px;
  border-style: solid;
  border-color:white;
  border-radius: 10% / 100%

}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 18px;
  font-family: "Arial";
  color: white;
  font-size: 20px;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}