CSSの水平タイムライン

Question

私はこのような画像が必要です。また、リストが動的になるようにナビゲーションボタンのクリック時に水平にスクロールするナビゲーションボタンが必要です。 以下のコードをCSSとHTMLで挿入しています。これはCSSでのみ行う必要がありますが、ナビゲーションアイコンにはJavaScriptを使用できます。また、<li>要素のテキストが長すぎても重複してはいけません。

.timeline { 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
} 
 

 
.timeline ol { 
 
    font-size: 0; 
 
    width: 100vw; 
 
    padding: 250px 0; 
 
    transition: all 1s; 
 
} 
 

 
.timeline ol li { 
 
    position: relative; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    width: 160px; 
 
    height: 3px; 
 
    background: #e1e2e3; 
 
} 
 

 
.timeline ol li:last-child { 
 
    width: 280px; 
 
} 
 

 
.timeline ol li:not(:first-child) { 
 
    margin-left: 14px; 
 
} 
 

 
.timeline ol li:not(:last-child)::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: calc(100% + 1px); 
 
    bottom: 0; 
 
    width: 12px; 
 
    height: 12px; 
 
    transform: translateY(-50%); 
 
    border-radius: 50%; 
 
    background: #e1e2e3; 
 
}

<div class="timeline"> 
 
    <ol> 
 
     <li>abc</li> 
 
     <li>hello welcome</li> 
 
     <li>cool summer</li> 
 
     <li>hi there</li> 
 
     <li>whats up</li> 
 
    </ol> 
 
</div>

Answer 1

この試してください：あなたが実際にリスト項目のテキストの内容を確認したい場合はいない可能性があります、その後3pxにその高さを制限し、まあ

.timeline { 
    overflow-x: hidden; 
    padding: 20px 0; 
} 

.timeline ol { 
    width: 100%; 
    transition: all 1s; 
    margin:0; 
    padding:0; 
    display:flex; 
    justify-content: space-between; 
} 

.timeline ol li { 
    list-style:none; 
    position: relative; 
    text-align:center; 
    flex-grow: 1; 
    flex-basis: 0; 
    padding: 0 5px; 
} 

.timeline ol li:before { 
    content:""; 
    width:10px; 
    height:10px; 
    display:block; 
    border-radius:50%; 
    background: #ccc; 
    margin:0 auto 5px auto; 
} 
.timeline ol li:not(:last-child)::after { 
    content: ""; 
    width: calc(100% - 14px); 
    height: 2px; 
    display: block; 
    background: #ccc; 
    margin: 0; 
    position: absolute; 
    top: 4px; 
    left: calc(50% + 7px); 
} 

https://jsfiddle.net/uer3gxeo/1/