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

我的菜单中使用了类似于此的内容 - 现实中的红线具有图像背景，并应突出显示整个内容或全角。Make：在父元素溢出后元素展开为全宽

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

任何方式使其扩大到全宽？

（我可以使用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>

来源

2015-03-03 MightyPork

您可以使用媒体查询只定位移动和重置你的CSS（用您的手机屏幕分辨率更换200像素，通常480像素）：

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

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

}

来源

2015-03-03 10:12:03 denisol

所以这是造成这种情况的空白？ – MightyPork 2015-03-03 10:14:36

是的。您的背景将会延伸至100％，但由于您的副本不会中断，因此会延伸并溢出。另一个解决方法是将背景位置设置为固定，这样您可以滚动查看文本，但bg保持固定位置（尽管我不会为移动设备推荐此选项）。 – denisol 2015-03-03 10:19:18

-1

我可以对你有一个简单的解决方案的问题：设置边框和DELET后面的元素。

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

http://jsfiddle.net/ex0p6thd/

来源

2015-03-03 10:05:09 Mat

我说，它有一个图像背景，我又不是傻瓜，我知道如何使一个边界。 – MightyPork 2015-03-03 10:05:39

你不需要粗鲁。我希望你能有别人帮助你。我在这里完成。 – Mat 2015-03-03 10:11:48

这里的工作解。它使用错误来定位相对于具有transform属性的任何父项的固定位置元素。只要确保将after元素的宽度设置得大于父元素的宽度（以px或％表示）。

.outer { 
 
    font-size: 16pt; 
 
    overflow: hidden; 
 
} 
 

 
.menu { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
    position:relative; 
 
    transform: rotateZ(0); 
 
} 
 

 
.menu:after { 
 
    content:''; 
 
    background-color:red; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 10000%; 
 
    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>

来源

2015-03-03 10:31:01

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

回答

相关问题