CSS li отступ от вложенности

373

24 ноября 2016, 10:20

Как заменить данный CSS циклом, добавляющим +20px padding к каждому следующему элементу в дереве li? необходим именно padding!

$(document).ready(function(){ 
    $("#admindivisionmenu li").each(function() { 
	    if($(this).has("ul").length) { 
		    $(this).prepend('<div class="admindivisionmenu-child admindivisionmenu-child-close"></div>'); 
		} else { 
			$(this).find("a").first().addClass("admindivisionmenu-without-clild"); 
		} 
    }); 
    $(".admindivisionmenu-child").click(function() { 
	     
	    if($(this).hasClass('admindivisionmenu-child-close')) { 
		    $(this).parent().find('ul').first().slideDown(); 
			$(this).removeClass('admindivisionmenu-child-close').addClass('admindivisionmenu-child-open'); 
	    } else { 
		    $(this).parent().find('ul').slideUp(); 
			$(this).parent().find('div').removeClass('admindivisionmenu-child-open').addClass('admindivisionmenu-child-close'); 
	    } 
	     
    }); 
    
});

.admin-division-menu > ul > li a.admindivisionmenu-without-clild {padding-left: 20px;} 
 
.admin-division-menu > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 30px;} 
.admin-division-menu > ul > li > ul > li .admindivisionmenu-child {margin-left: 30px;} 
 
.admin-division-menu > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 50px;} 
.admin-division-menu > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 50px;} 
 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 70px;} 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 70px;} 
 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 90px;} 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 90px;}

<div class="admin-division-menu" id="admindivisionmenu"><ul><li><a href="?divisionid=1">Раздел 1</a><ul><li><a href="?divisionid=2">Раздел 2</a></li><li><a href="?divisionid=3">Раздел 3</a><ul><li><a href="?divisionid=4">Раздел 4</a><ul><li><a href="?divisionid=8">Раздел 8</a><ul><li><a href="?divisionid=9">Раздел 9</a></li></ul></li></ul></li></ul></li></ul></li><li><a href="?divisionid=5">Раздел 5</a></li><li><a href="?divisionid=6">Раздел 6</a></li><li><a href="?divisionid=7">Раздел 7</a></li></ul></div>

Answer 1

Так годится?

div { 
  position: relative; 
  float: left; 
} 
 
li:before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  border-top: 1px solid; 
}

<div class="admin-division-menu" id="admindivisionmenu"><ul><li><a href="?divisionid=1">Раздел 1</a><ul><li><a href="?divisionid=2">Раздел 2</a></li><li><a href="?divisionid=3">Раздел 3</a><ul><li><a href="?divisionid=4">Раздел 4</a><ul><li><a href="?divisionid=8">Раздел 8</a><ul><li><a href="?divisionid=9">Раздел 9</a></li></ul></li></ul></li></ul></li></ul></li><li><a href="?divisionid=5">Раздел 5</a></li><li><a href="?divisionid=6">Раздел 6</a></li><li><a href="?divisionid=7">Раздел 7</a></li></ul></div>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Убрать padding для внутреннего элемента

Если у body стоит padding: 0px 10px;, как можно убрать этот стиль у одного из внутренних элементов, а то отступы остаются, а их не должно быть - в футере,...

573

CSS