與縮進動態墊襯嵌套列表

看看我的代碼，例如在JS斌： http://jsbin.com/iritep/3/edit 與縮進動態墊襯嵌套列表

我想縮進黃色項目不繼續我的硬編碼的CSS規則：

ul li a {padding-left: 20px;} 
ul li ul li a {padding-left: 40px;} 
ul li ul li ul li a {padding-left: 60px;} 
ul li ul li ul li ul li a {padding-left: 80px;} /* don't want this line! */

我可以使這個CSS更加動態，而不必添加最後一行的CSS？

來源

2012-03-29 dsilfver

是很重要的空間，每個鏈接數的左邊爲鏈接的一部分？ – thirtydot 2012-03-29 11:56:07

您至少可以省略所有選擇器中的第一個「ul」。 – Christoph 2012-03-29 13:16:35

對不起，＃2並沒有讓我在這樣短的時間內兩次發表評論。這裏是解決我的問題的鏈接。

http://jsbin.com/iritep/5/edit#javascript,html,live

來源

2012-03-30 06:58:11 dsilfver

改變你的CSS規則咯，你可以做到以下幾點：

ul li{ 
    padding-left:20px; 
}

這將進一步縮進每一個新的水平20像素。看，如果那仍然適合你。（縮進列表通常帶來一些小的造型的限制（如着色通過li或a元一行。））

來源

2012-03-29 12:26:33 Christoph

是的，但問題是我需要邊框伸展到屏幕的邊緣。我解決了這樣的問題： – dsilfver 2012-03-29 13:06:19

這仍然不能執行他正在尋找的東西;他正在根據列表所在的級別來製作不同的填充。 – 2015-03-17 10:36:59

@WilliamCallahan嗯，它確實是這樣的嵌套結構：http://jsbin.com/mumayirufa/1/edit它唯一不會的（因爲CSS不能這樣做）保持列表項目的長度（但不包括在最初的問題中）。 – Christoph 2015-03-17 14:06:02

與縮進動態墊襯嵌套列表

回答

相關問題