CSS橫向時間尺度是一種非常常用的技術，它可以幫助我們在網頁上呈現出時間線的效果。通過使用CSS橫向時間尺度，我們可以清晰地展示出事物的發展軌跡，讓人一目了然。

.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
left: 20px;
width: 4px;
height: 100%;
background: #333;
}
.timeline ul {
padding: 0;
list-style: none;
}
.timeline li {
position: relative;
margin-bottom: 50px;
}
.timeline li:before,
.timeline li:after {
content: '';
position: absolute;
top: 10px;
right: -8px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 8px solid #333;
}
.timeline li:after {
right: auto;
left: -8px;
border-left: 8px solid #fff;
}
.timeline li:last-child {
margin-bottom: 0;
}
.timeline li.timeline-inverted:before,
.timeline li.timeline-inverted:after {
right: auto;
left: -8px;
border-left-width: 0;
border-right: 8px solid #333;
}
.timeline li.timeline-inverted:after {
border-right: 8px solid #fff;
}

在上面的代碼中，我們通過樣式設置了時間軸的整體樣式，包括寬度、邊距、內邊距、背景等。其中，.timeline:before和.timeline li:before用來設置時間軸上的小圓點，以及圓點與時間軸直線之間的連線。我們還為.timeline li設置了位置屬性，并對每個時間節點設置了自己的樣式。最后，我們通過使用偽類選擇器:before和:after在時間軸的左右兩側各添加了一個三角形。

實際應用CSS橫向時間尺度的時候，我們還可以根據具體情況對樣式進行靈活調整，比如可以為每個時間節點添加不同的圖標或背景顏色，增強可讀性。