Wcięcia w zagnieżdżonych listach w HTML/CSS

Question

Zacząłem używać Twitter Bootstrap, który jest przydatny dla mnie (jako programisty) do uzyskania przyzwoicie wyglądającej witryny bez pisania zbyt wielu CSS.

Coś jednak doprowadza mnie do szału. Mam zagnieżdżonej listy jak

<ul> 
    <li>Hello</li> 
    <li>World 
    <ul> 
     <li>Wide</li> 
     <li>Web</li> 
    </ul> 
    </li> 
</ul> 

ale pierwszy i drugi poziom tej listy nie są coraz wcięte inaczej (tzn. Oni wyrównać ze sobą po lewej)

W normalnych html zagnieżdżonych listach, głębiej podlisty wcinają więcej. Ale coś w arkuszu stylów musi to wyłączyć. Jak znaleźć to, co kontroluje to? Nie widzę atrybutu "indentuj listę CSS" dla elementów li w dowolnej dokumentacji.

Answer 1

Patrzysz ustawić padding-left:

li { padding-left: 1em; } 

będzie wciąć każdy li 1 em. Ponieważ wewnętrzny lis jest już odsunięty od zewnętrznego lis, powinien zrobić to, co chcesz.

Answer 2

Po prostu użyj Firebug w FF lub Chrome dev-tools: kliknij prawym przyciskiem myszy element docelowy i element select inspect. Możesz sprawdzić wizualnie i tekstowo właściwości CSS, aby zobaczyć, co powoduje zawalenie.

Prawdopodobnie chcesz reguła jak

ul > li { 
    margin-left: 10px; 
} 

Answer 3

Wystarczy dodać do powyższych odpowiedzi: padding-left będzie wciąć te słowa, ale nie o to chodzi kula, natomiast margin-left będzie wciąć podpunkt również.

Przykład: http://jsfiddle.net/GMLxv/

Answer 4

miałem ten sam problem jak ty.

Istnieje reguła type.less że anuluje wcięcia na listach:

ul, ol { 
    padding: 0; 
    margin: 0 0 @baseLineHeight/2 25px; 
} 

skończyło się nadrzędnymi tę regułę:

ul, ol { 
    padding: 0px 25px; 
} 

wcięcia w zagnieżdżonych list jest teraz z powrotem.

Answer 5

Czy to możliwe, że ustawiłeś punkty z punktorami na elementy listy zamiast przed nim, co znacznie zmieniłoby Twój wygląd.

CSS je stosować: ul { list-style-position: inside; }

Więcej o list-style-position.

Przykład: https://jsfiddle.net/g0k0obwh/

Answer 6

Korzystanie Bootstrap można zrobić poprzez kodowanie w następujący sposób. Po prostu wklej go do swojej strony JSP lub HTML i przetestuj. Możesz przejść przez ten link, aby uzyskać więcej informacji.

http://www.bootply.com/DglnYJTSKA

<div id="MainMenu"> 
     <div class="list-group panel"> 
      <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a> 
      <div class="collapse" id="demo3"> 
      <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a> 
      <div class="collapse list-group-submenu" id="SubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a> 
       <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a> 
       <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a> 
       </div> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a> 
      </div> 
      <a href="javascript:;" class="list-group-item">Subitem 2</a> 
      <a href="javascript:;" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> 
      <div class="collapse" id="demo4"> 
      <a href="" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a> 
      <div class="collapse" id="demo5"> 
      <a href="#" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
     </div> 
     </div> 

CSS:

.list-group.panel > .list-group-item { 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px 
} 
.list-group-submenu { 
    margin-left:20px; 
} 

Answer 7

Wykonaj prosty sposób korzystania z grupy lista

Daje zagnieżdżony listę:

<ul class="list-group"> 
     <li class="list-group-item">Cras justo odio</li> 
     <li class="list-group-item"> 
       <ul class="list-group"> 
        <li class="list-group-item">Cras justo odio</li> 
        <li class="list-group-item"> 
         <ul class="list-group"> 
          <li class="list-group-item">Cras justo odio</li> 
          <li class="list-group-item">Dapibus ac facilisis in</li> 
         </ul> 
        </li> 

      </ul> 
     </li> 
     <li class="list-group-item">Morbi leo risus</li> 
     <li class="list-group-item">Porta ac consectetur ac</li> 
     <li class="list-group-item">Vestibulum at eros</li> 
</ul>