CSS中,常用的無限樹形是基于無序列表(ul)和列表項(li)的,通過CSS樣式將其變成樹形結構。
首先,我們需要對ul和li元素設置樣式。ul元素的樣式應該包括去除默認樣式并設置該元素為塊級元素(display: block;)。li元素的樣式應該包括去除默認樣式、設置為行內元素(display: inline-block;)和添加左側縮進(padding-left)。
ul { list-style: none; display: block; } li { display: inline-block; padding-left: 20px; }
接下來,我們需要將樹形所有層級的li元素縮進相應的距離。可以使用CSS偽類選擇器“:before”來添加這一樣式。使用content屬性來定義縮進字符(例如“?”),使用position和left屬性將該字符定位到正確位置。
li:before { content: "?"; position: absolute; left: -15px; }
最后,我們需要設置每個li元素的深度。使用CSS偽類選擇器“:not(:first-child)”來確保不為第一個li元素添加樣式。使用“ul ul li:before”來縮進子元素中的元素。
li:not(:first-child):before { padding-top: 10px; } ul ul li:before { content: "?"; position: absolute; left: -25px; }
使用這些CSS樣式后,我們可以輕松地創建一個無限的樹形結構,只需要使用無序列表和列表項元素即可。