我如何使伪元素适合div的整个宽度？它在滚动条处切断

问题描述 投票：0回答：1

[有人可以帮我弄清楚如何使我的伪元素跨过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>
html css scroll width pseudo-element
1个回答
0
投票

我已从网格更改为行内块，以使其仍水平显示。但我认为以下内容对我有用...宽度：最大内容；

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.