在菜单栏中的按钮之间添加分隔符（HTML/CSS）

我正在制作一个移动网站，在对菜单栏进行一些更改时遇到了一些困难。我不是这个领域的专家，所以非常感谢你的帮助

下面是菜单栏的代码

CSS

---

从当前css中删除

float:leftli

上添加code>，并添加

文本对齐：居中并且它应该可以工作：

ul li {
    text-align: center;
    padding: 1.5px;
    position: relative;
    margin: auto;
}

这是一张工作票

更新
在这种情况下，您可以将CSS更改为

ul li{
    text-align:center;
    display:inline-block;
}

ul li:before {
    content: " - ";
}

ul li:first-child:before {
    content: none;
}

这里有一个正在工作的现在只删除
浮动：左
在
li
和添加
显示：内联块
和在ul标签中添加
文本对齐中心

像这样

ul{
text-align:center;
}

ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}

我在css代码中添加了以下几行。我希望这就是你想要的

ul{
   display:inline-block;
   overflow:hidden;
}

div{
  text-align:center;
}

li:after{
   border-right:50px solid black;
   content:"";
   position:relative;
   left:10px;
   top:-27px;  
   z-index:-1;
   display:block;
   height:1px;
}

li:last-child{
   margin-right:-14px
}

这将使菜单按钮垂直。我希望菜单也是水平的：）你所说的线条是什么意思？一条基本的水平线，比如
，但我希望它们位于两侧的每个按钮旁边。这就像在菜单栏上的每个按钮之间留有一些空间，而不是我想要的空间。这条线应该是可伸缩的，并根据屏幕大小改变大小，我不认为破折号可以做到：）在这种情况下，为什么不在每个
之后手动添加一个图像或你想要的元素，从而形成背景网页标题的颜色显示在按钮后面，即使按钮居中。有什么办法可以解决这个问题吗？几乎完美。我需要线是水平的而不是垂直的。请你把密码改成：）@AntonFernando对不起，那把小提琴不好。我又更新了我的帖子。请检查。好的，我用了这个，它可以工作，但我需要在左手边画一条线，使周围看起来均匀。如果你能帮我做一些额外的代码，我会非常感激，但我稍微改变了我的菜单条形码，所以它对我不起作用。查看我更改位置的原始帖子。将菜单按钮的宽度从75%更改为80像素。@AntonFernando我忍不住要这样做。请做一把工作小提琴，以便我能很快帮助你。
ul li{
    text-align:center;
    display:inline-block;
}

ul li:before {
    content: " - ";
}

ul li:first-child:before {
    content: none;
}

ul{
text-align:center;
}

ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}

ul{
   display:inline-block;
   overflow:hidden;
}

div{
  text-align:center;
}

li:after{
   border-right:50px solid black;
   content:"";
   position:relative;
   left:10px;
   top:-27px;  
   z-index:-1;
   display:block;
   height:1px;
}

li:last-child{
   margin-right:-14px
}