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：在父元素溢出後元素展開爲全寬

回答

相關問題