方案一:

html

• 參與考試《第一期模擬考試》

  3小時50分鐘

• 學習文檔《LDO電路設計規范》

  3小時50分鐘

• 學習文檔《LDO電路設計規范》

  3小時50分鐘

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標簽使用樣式寫成原點,采用定位將原點定位到邊框線上

方案二:

Html

• 參與考試《第一期模擬考試》

  3小時50分鐘

• 學習文檔《LDO電路設計規范》

  3小時50分鐘

• 學習文檔《LDO電路設計規范》

  3小時50分鐘

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 img{

position:absolute;

left:-5px;

top:0;

width:10px;

height:10px;

border-radius:10px;

background:#999;

}

ul li p{margin:0;}

ul li time{color:#999;font-size:12px;}

實現原理:

給li一個左邊框,同時在結構中添加img作為原點,使用定位將圖片原點定位在指定位置上

總結

以上是生活随笔為你收集整理的ul 原点显示_CSS+HTML ul li列表原点如何相连的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。