如何在不破坏时间线格式的情况下使用 overflow-x
How to use overflow-x without disrupting the format of a timeline
我正在尝试制作一个响应时间轴，我使用了 overflow-x 这样您就不能水平滚动，这在我的移动版本中是可能的，因此您的 burgermenu 的 children 可见没有实际点击它。但是，这将我的时间轴上的圆圈减少了一半，我不确定如何制作它才能在防止水平滚动的同时拥有完整的圆圈。有什么解决办法吗？
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
@media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}
<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>@Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>@Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>@UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>@LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>@Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
您应该将 CSS display: inline-table 添加到 CSS 选择器 .timeline ul li 以显示红色中点。
如果你不想 .CV, .timeline 上的 overflow-y: hidden;，你可以删除它，但你应该删除 .timeline 上的 padding: 40px 0;。
您可以使用此代码：
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
@media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}
<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>@Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>@Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>@UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>@LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>@Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
我正在尝试制作一个响应时间轴，我使用了 overflow-x 这样您就不能水平滚动，这在我的移动版本中是可能的，因此您的 burgermenu 的 children 可见没有实际点击它。但是，这将我的时间轴上的圆圈减少了一半，我不确定如何制作它才能在防止水平滚动的同时拥有完整的圆圈。有什么解决办法吗？
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
@media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}
<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>@Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>@Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>@UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>@LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>@Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
您应该将 CSS display: inline-table 添加到 CSS 选择器 .timeline ul li 以显示红色中点。
如果你不想 .CV, .timeline 上的 overflow-y: hidden;，你可以删除它，但你应该删除 .timeline 上的 padding: 40px 0;。
您可以使用此代码：
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
@media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}
<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>@Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>@Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>@UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>@LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>@Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>