CSS tiret zestaw li

Question

Googling i wyszukiwanie przepełnienie stosu nie zwraca żadnych wyników, które mogłyby uznaję, więc wybacz mi, jeśli ten został poproszony przed ...

mam rozwijanego menu główne, które wykorzystuje jako podstawę listy . Problem polega na tym, że listy są bardzo szerokie i nie są wcięte wystarczająco daleko po rozwinięciu. To jest mój problem! Jak zwiększyć wcięcie na listach za pomocą CSS?

Answer 1

wcięcia rozwijanego menu ul użyć

/* Main Level */ 
ul{ 
    margin-left:10px; 
} 

/* Second Level */ 
ul ul{ 
    margin-left:15px; 
} 

/* Third Level */ 
ul ul ul{ 
    margin-left:20px; 
} 

/* and so on... */ 

Można wcięcia li s i (jeśli dotyczy) a s (lub cokolwiek zawartość elementy masz), a także, każdy z różnych efektów. Można również użyć padding-left zamiast margin-left, ponownie w zależności od pożądanego efektu.

Aktualizacja

Domyślnie wiele przeglądarek używać padding-left do ustawienia początkowego wcięcia. Jeśli chcesz się tego pozbyć, skonfiguruj ustawienia padding-left: 0px; , które wpływają na wcięcie list na różne sposoby. W szczególności:margin-left wpływa na wcięcie na zewnętrznej krawędzi elementu, podczas gdy padding-left wpływa na odstępy po wewnętrznej stronie obramowania elementu. (Learn more about the CSS box model here)

Ustawienie padding-left: 0; pozostawia ikony kuli li wiszące nad krawędzią elementu (przynajmniej w Chrome), które mogą być lub nie być tym, co chcesz.

Przykłady padding-left vs margin-left i jak mogą pracować razem na ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Answer 2

li{ 
    margin-left:50px; 
} 

lub zastąp 50px cokolwiek chcesz.

Answer 3

Sponsorowane:

ul { 
    list-style-position: inside; 
} 

Answer 4

padding-left co steruje wcięcia ul nie margin-left.

Porównaj: Tutaj ustawia się padding-left na 0px, zauważ, że wszystkie wcięcia znikają.

ul { 
 
    padding-left: 0px; 
 
}

<ul> 
 
    <li>section a 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>section b 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

i tu jest ustawienie margin-left do 0px. Zwróć uwagę, że wcięcie NIE zmienia się.

ul { 
 
    margin-left: 0px; 
 
}

<ul> 
 
    <li>section a 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>section b 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 5

Okazało się, że robi to w dwóch stosunkowo prostych krokach wydawało się całkiem dobrze. Pierwsza definicja css dla ul ustawia wcięcie podstawowe dla całej listy.Druga definicja ustawia wartość wcięcia dla każdego zagnieżdżonego elementu listy w nim. W moim przypadku są one takie same, ale możesz oczywiście wybrać, co chcesz.

ul { 
    margin-left: 1.5em; 
} 

ul > ul { 
    margin-left: 1.5em; 
}