CSS3 實現根據ul中li的個數設定li的寬度

2021-09-26 04:16:15 字數 829 閱讀 2238

在專案中遇到ul中的li數量不定,但是還要給ul設定圓角和陰影,而ul預設的寬度是100%,上網查到乙個簡單的方法就是在ul中加屬性

ul

li

如果對瀏覽器要求不高,這種方法就可以實現了

first-child

first-child表示選擇列表中的第乙個標籤

nth-child(n+3)

這個表示選擇列表中的標籤從第3個開始到最後。

nth-child(2n) 

這個表示選擇列表中的偶數標籤,即選擇 第2、第4、第6…… 標籤。

nth-child(2n-1)

這個表示選擇列表中的奇數標籤,即選擇 第1、第3、第5、第7……標籤。

nth-child(-n+3)

這個表示選擇列表中的標籤從0到3,即小於3的標籤

nth-last-child(3)

這個表示選擇列表中的倒數第3個標籤。

li 

li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li

li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li

li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li

li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) ~ li

CSS的ul和li實現橫向排列和去掉li的點

今天做網頁是老是不懂怎麼實現ul的橫向排列和去掉li那個煩人的點,現在找到方法了,做個筆記 複製 如下 ul ul li 順便拓展一下li的list style 複製 如下 ul 程式設計客棧 ul ol ol 再寫個今天看到的東西,是關於dl,dt,dd的,其實就是類似於子類的,我比較少見到各個網...

CSS中的ul與li樣式詳解

因為ie6和firefox中對於ul li 的解釋不甚相同,故在需要用到list style各種type時推薦作用以下方法 即用作為li的背景,並用padding來給背景留下顯示的空間,注意設定寬度的同時設overflow hidden防止當使用者輸入一連串 aaaaaaaaaaaaaaaaa 時會...

CSS中的ul與li樣式詳解

因為ie6和firefox中對於ul li 的解釋不甚相同,故在需要用到list style各種type時推薦作用以下方法 即用作為li的背景,並用padding來給背景留下顯示的空間,注意設定寬度的同時設overflow hidden防止當使用者輸入一連串 aaaaaaaaaaaaaaaaa 時會...