[英]How do I make a pseudo element fit the entire width of div? It is cutting off at the scroll
有人可以幫我弄清楚如何讓我的偽元素跨越我的 div 元素的整個寬度，而不是在滾動處切斷嗎？
我嘗試了一些在網上找到的不同方法，包括更改顯示類型、寬度等。請記住，這需要水平顯示。 如果您有任何其他建議如何使這項工作或總體上的任何改進，那就太好了。
謝謝
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vardana'; }.container { background: linear-gradient(to right, rgba(20,30,48,.9), rgba(36,59,85,.9)); margin: 20px; height: 400px; border-radius: 10px; overflow: scroll; font-size: 13px; }.container ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; position: relative; }.container ul:before { content: ""; position: absolute; width: 100%; height: 4px; background: white; margin-top: 20px; }.Event1:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event2:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event3:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event4:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event5:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event6:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; } li { list-style: none; }.Event1 h4 { color: #feb645; font-size: 14px; }.Event2 h4 { color: #feb645; font-size: 14px; }.Event3 h4 { color: #feb645; font-size: 14px; }.Event4 h4 { color: #feb645; font-size: 14px; }.Event5 h4 { color: #feb645; font-size: 14px; }.Event6 h4 { color: #feb645; font-size: 14px; }.Event1 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event2 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event3 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event4 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event5 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event6 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }
<.DOCTYPE HTML> <html lang=“en”> <head> <title>Dads Website</title> <link rel="stylesheet" href="stylesheet.css"> <script src="JavaScript,js" defer> </script> </head> <body> <header> <nav class="navbar"> <h1>History Timeline</h1> </header> <div class="container"> <ul id="timelineList"> <li class="Event1"><h4>Event 1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event2"><h4>Event 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event3"><h4>Event 3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event4"><h4>Event 4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event5"><h4>Event 5</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event6"><h4>Event 6</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> </ul> </div> </body> <footer class="footer"> </footer> </html>
我已經從網格更改為內聯塊，以使其仍然水平顯示。 但我認為以下內容對我有用...... Width: max-content;
HTML / CSS-內容創建水平滾動條時，如何固定width：100％的寬度？
[英]HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?
如何使偽元素的背景圖像拉伸以適合寬度？
[英]How to make the background image of the pseudo element stretch to fit the width?
如何制作 <video> 元素適合可用屏幕的整個高度和寬度
[英]How to make a <video> element fit the entire height and width of the available screen
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.