Html 如果列表项分成两行，则它们需要一个全宽的上边框

我有一个挑战，一个列表项目的菜单。如果项目分成两行（在较小的屏幕中），设计师希望在项目上方添加一行。该行应跨越ul宽度的100%，即使第二行列表项较短。它应该看起来像这个图像-只有在列表项上方有一条灰线

我试图使用一个

：伪元素

，但仍然没有成功地使第二行的灰线占据100%的宽度

---

有什么想法吗？

一个可能的解决方案是将伪元素变大

li:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 1px;
  border-bottom: 2px solid #ccc;
  z-index: 1;
}

如果项目分成两行（在较小的屏幕中），设计师希望在项目上方添加一行

注意：由于CSS无法检测到换行，因此这将始终适用。因此，您必须在媒体查询中应用这一点

ul{
列表样式：无；
保证金：0；
溢出：隐藏；
}
李{
显示：内联块；
右边距：2px；
填充物：5px；
位置：相对位置；
z指数：2；
}
李：以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：2000px；
高度：1px；
边框底部：2个实心#ccc；
z指数：1；
}
div{
填充物：5px；
宽度：75%；
保证金：自动；
溢出：隐藏；
}

列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

为什么不在此处使用表格（或使用带display:table cell等的div）-看起来您使用的是表格数据？这不是表格数据，而是菜单。一个内置于引导框架内的菜单。如果它不分成多行，它会是什么样子？