[英]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.