Question

我在菜单中使用类似的东西 - 现实中的红线有图像背景，应该在整个内容下划线或者到达全宽。

它在大屏幕上工作正常，但在小屏幕上（这里通过设置宽度模拟），红线在实际内容之前结束。

有什么方法可以扩展到全宽？

（我可以使用javascript（甚至是jquery），但我不想这样做）

.outer {
  font-size: 16pt;
}

.menu {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    position:relative;
}

.menu:after {
    content:'';
    background-color:red;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

<div class="outer">
    <div class="menu"> 
        This is on desktop and everything is fine.
    </div>
</div>

<div class="outer" style="width: 200px">
    <div class="menu"> 
        This is on phone, the content overflows as you can see.
    </div>
</div>

Answer 1

您可以使用媒体查询仅定位移动设备并重置CSS（将200px替换为移动设备的屏幕分辨率，通常为480px）：

@media screen and (max-width: 200px) {

  .menu {
      overflow-x: initial;
      white-space: normal;
  }

}

Answer 2

我可能有一个简单的解决方案：设置边框并删除after元素。

.menu {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    position:relative;
    border-bottom:2px solid red;
}

http://jsfiddle.net/ex0p6thd/

Make：在父元素溢出后，元素展开到全宽

2 个答案: