Hiyerarşik Liste Oluştur - CSS

---

Konular ve alt konulardan oluşan hiyerarşik bir liste için 1.1, 1.1.2, 2.3.5.6 gibi otomatik değerler veren ve yapıya buna göre boşluk ekleyen bir etiket yapısına ihtiyacınız varsa aşağıdaki kod işinize yarayabilir.

Sayı hiyerarşisini otomatik olarak yapan bir ol ve li etiket grubuna ihtiyacımız var, buna nasıl bir müdahalede bulunabiliriz?

.hiyerarsik-liste {
	margin-bottom: 15px;
}

.hiyerarsik-liste ol {
	list-style-type: none;
	counter-reset: item;
	margin: 0;
	padding: 0;
}

.hiyerarsik-liste ol li {
	display: table;
	counter-increment: item;
	/* margin-bottom: 0.6em; */
}

.hiyerarsik-liste ol li:before {
	content: counters(item, ".") ". ";
	display: table-cell;
	padding-right: 0.6em;
}

.hiyerarsik-liste ol li li {
	/* margin: 15px 0 15px 0; */
}

.hiyerarsik-liste ol li li:before {
	content: counters(item, ".") ". ";
}

.hiyerarsik-liste ol ul {
	content:none;
	list-style-type: circle;
	margin: 0;
	padding: 0;
}

.hiyerarsik-liste ol ul li {
	display: table;
	/* margin-bottom: 0.6em; */
}

Çözüm çok başarılı sonuç verse de istemediğim bir iki durum var, eğer onları da çözebilirsem yeni halini de eklerim.

• Mobil ekranda (320px için) içerik düzgün görüntülenmiyor.
• .hiyerarsik-liste sınıfındaki div içine ul etiketi eklendiğinde onu da sayı sistemine dahil ediyor. Olmasa daha iyi olurdu.

css

---