本文將介紹如何使用 HTML 編寫橫時間軸。橫時間軸是一種常用的圖形形式，用于展示特定時間段內的事件和進程。 首先，我們需要準備必要的 HTML 元素。我們需要一個包含所有事件的容器，并在其中添加每個事件的元素。為方便起見，我們可以使用無序列表 (ul) 來創建容器。

<ul id="timeline">
<li class="event">事件 1</li>
<li class="event">事件 2</li>
<li class="event">事件 3</li>
<li class="event">事件 4</li>
</ul>

在容器中，每個事件都表示為一個列表項 (li)。我們可以使用 CSS 樣式來定義每個事件的外觀。 接下來，我們需要在 CSS 文件中定義樣式。為了確保時間軸中的所有事件位于同一水平線上，我們需要使用絕對定位 (absolute) 和左邊距 (left)。

#timeline {
position: relative;
list-style: none;
padding: 0;
}
.event {
position: absolute;
left: 0;
width: 100%;
}

但是，這些代碼不會實現時間軸的效果。為了創建時間軸，我們需要使用懸掛縮進 (hanging indentation) 來為每個事件添加標記。懸掛縮進是一種使文本向左縮進一段距離的方法，而首行不縮進。在 CSS 中，我們可以使用 text-indent 屬性實現懸掛縮進。

.event::before {
content: "";
position: absolute;
top: 0;
left: -10px;
height: 100%;
width: 2px;
background: #ccc;
}
.event {
text-indent: -20px; 
padding-left: 30px;
}

在樣式中添加 ::before 偽元素，創建時間軸事件的向左延伸的豎線。我們使用 positioning 定義線的位置，height 定義線的長度，width 定義線的寬度，background 定義線的顏色，left 屬性定義線的位置。text-indent 屬性定義文字離左側線的距離。padding-left 定義事件之間的空間。 這樣，我們就在 HTML 中創建了一個簡單的時間軸。這種自定義的時序工具可以用于在網站上可視化漫長的歷史記錄，展示時間進程，或是節日慶祝。對于網站的設計和構建，時間軸也可以為用戶帶來更好的使用體驗和產品展示。