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

Question

我在列表项菜单方面遇到了挑战。如果元素分为两行(在较小的屏幕中)，设计者希望在元素上方添加一行。该行应跨越 ul 宽度的 100%，即使列表项的第二行更短。它应该看起来像这张图片 - 只有列表项上方有灰线。

我有fiddled with it here尝试使用 :pseudo element，但仍然无法让第二行的灰线占据 100% 的宽度。

有什么想法吗？

Answer 1

一个可能的解决方案是使伪元素真的变大。

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

The designer wants to add a line above the items if they break into two lines (in smaller screens).

注意:由于 CSS 无法检测换行符，这将始终适用..因此您必须在媒体查询中应用它。

ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
}
li {
  display: inline-block;
  margin-right: 2px;
  padding: 5px;
  position: relative;
  z-index: 2;
}
li:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 1px;
  border-bottom: 2px solid #ccc;
  z-index: 1;
}
div {
  padding: 5px;
  width: 75%;
  margin: auto;
  overflow: hidden;
}

<div>
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>