Jquery 如何在li元素中添加全高的左边框？

我正在创建一个简单的菜单，但我遇到了边界问题。我必须用li元素显示完整的左边框。你能帮我吗

我得到这样的输出。 我需要这样的输出。

正文{
保证金：0；
填充：0；
}
.仪表板菜单
{
背景色：#763E9B；
宽度：100%；
最小高度：100px；
颜色：#fff；
}
.仪表板菜单h2
{
浮动：左；
}
.仪表板标题ul
{
浮动：对；
列表样式：无；
}
.仪表板标题李{
浮动：左；
利润率：20px；
}
李：以前{
内容：“|”；
颜色：#A569BD；
显示：内联块；
左边框：3倍纯黄色；
}

嗨，欢迎回来

菜单1
菜单2
菜单3

您可以尝试以下两种修复：

显示：表格单元格在

给出

高度：100%到你的身体/html和你的

---

基本上，您的

不会消耗其父项的整个高度。以上两种方法中的任何一种都可以实现这一点。

我很快就把这两种方法结合起来了，所以我相信可以用一种更优雅的方式来完成

我将左边的边框放在li本身上，而不是：before，因此我添加的所有代码都在这里：

.dash-header li{
  float: left;
  height: 20px;
  margin-top: -20px;
  padding-top: 40px;
  padding-bottom: 44px;
  border-left: 3px solid yellow; 
}

---

如果不需要使用表格（我不认为它适用于菜单），我喜欢使用flex，因为我发现它响应更快，更易于定制和控制。我经常将flex选项设置为类，并根据需要应用它们（即

.justify-between

和

.justify-around

）

正文{
保证金：0；
填充：0；
}
.仪表板菜单{
显示器：flex；
flex direction:row；/*flex默认为row，所以这只是供参考的*/
证明内容：之间的空间；
宽度：100%；
背景#763E9B；
颜色：#FFFFFF；
}
.仪表板菜单h2{
填充：0 10px；
}
.仪表板菜单{
显示器：flex；
对齐项目：居中；
填充：0；
保证金：0；
}
.仪表板菜单ul li{
显示器：flex；
对齐项目：居中；
最小高度：100%；
填充：0 10px；
列表样式类型：无；
左边框：3倍纯黄色；
}

嗨，欢迎回来

菜单1
菜单2
菜单3

谢谢你的回复，Shobhit先生。但是什么也没发生。仍然是同一个问题。完全正确，Tristan，它对我有效。我还需要一个帮助，我在课堂短划线菜单中添加了最小高度：100px。可以吗？因为如果我去掉它，我就不会得到背景色。如果它起作用，那很酷！我真的不明白为什么最小高度：100px决定你是否得到背景色