方案一: html <ul> <li> <em></em> <p><b>參與考試《第一期模擬考試》</b></p> <p><time>3小時50分鐘</time></p> </li> <li> <em></em> <p><b>學習文件《LDO電路設計規範》</b></p> <p><time>3小時50分鐘</time></p> </li> <li> <em></em> <p><b>學習文件《LDO電路設計規範》</b></p> <p><time>3小時50分鐘</time></p> </li> </ul> Css: *{margin:0;padding:0;} ul{ margin:100px; padding:0; list-style: none; } ul li{ position:relative; padding-left: 30px; padding-bottom: 20px; border-left:2px #999 solid; } ul li em{ position:absolute; left:-5px; top:0; width:8px; height:8px;border-radius:8px;background:#999; } ul li.active em{ background: red;} ul li p{margin:0;} ul li time{color:#999;font-size:12px;} 實現原理: 給每一個li一個左邊框,em標籤使用樣式寫成原點,採用定位將原點定位到邊框線上