列表项目如果分成两行

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;
}

  

设计师想要在项目上方添加一行，如果它们分成两行（在较小的屏幕中）。

注意：由于CSS无法检测到换行符，因此总是应用。因此您必须在媒体查询中应用此功能。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;