我正在嘗試創建一個具有固定寬度的可滾動水平時間軸。我在父容器上有 overflow-x: auto ，每當我向同一個元素添加 white-space: nowrap 時，子串列元素開始被切斷。我認為這與 flex-box 的行為有關。我嘗試將 min-width: 0 添加到 flex 元素和 flex-grow: 1 但沒有運氣。
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>uj5u.com熱心網友回復：
添加width: fit-content;到您的timeline. 這使所有元素都適合水平滾動。然后，您將padding-inline-start在ol. padding: 0;您可以通過設定或來消除該間隙padding-inline-start: 0;。
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
width: fit-content;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454085.html