Как сделать так, чтобы псевдоэлемент соответствовал всей ширине div? Это отрубается на свитке - PullRequest
Новая
       24

Как сделать так, чтобы псевдоэлемент соответствовал всей ширине div? Это отрубается на свитке

0 голосов
/ 16 апреля 2020

Может кто-нибудь помочь мне понять, как сделать так, чтобы мой псевдоэлемент охватывал всю ширину моего элемента div, вместо того, чтобы вырезать из прокрутки, пожалуйста?

Я пробовал несколько разных вещей, найденных онлайн, включая изменение типа дисплея, ширины и т. Д. c. Пожалуйста, имейте в виду, что это должно отображаться горизонтально. Если у вас есть какие-либо другие предложения, как это сделать или какие-либо улучшения в целом, это было бы замечательно.

спасибо 

* {
	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>

1 Ответ

0 голосов
/ 18 апреля 2020

Я изменил сетку на встроенный блок, чтобы он по-прежнему отображался горизонтально. Но я думаю, что ниже работает для меня ... Ширина: max-content;

...