Sangría en listas anidadas en HTML/CSS

Empecé a usar Twitter Bootstrap, que es útil para mí (como programador) para obtener un sitio de aspecto decente sin tener que escribir mucho CSS.Sangría en listas anidadas en HTML/CSS

Sin embargo, algo me está volviendo loco. Tengo una lista anidada como

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

Pero el primer y segundo nivel de esta lista no están recibiendo sangría diferente (es decir. Que se alinean entre sí a la izquierda)

En las listas normales HTML anidados, más profunda sublistas sangría más. Pero algo en la hoja de estilo debe estar apagando esto. ¿Cómo encuentro lo que controla esto? No puedo ver un atributo CSS "sangría de lista" para elementos li en cualquier documentación.

Fuente

2012-02-27 interstar

Puedes reproducir en JSFiddle. Su código con Twitter bootstrap funciona bien para mí: http://jsfiddle.net/3hHwF/ –

Usted está mirando para establecer padding-left:

li { padding-left: 1em; }

se sangrar cada 1 em li. Como la lis interior ya está desplazada de la lis exterior, debería hacer lo que desee.

Fuente

2012-02-27 22:27:55

Simplemente use Firebug en FF o Chrome dev-tools: haga clic derecho en su elemento objetivo y select inspect. Puede inspeccionar visualmente y textualmente las propiedades CSS para ver qué está causando el colapso.

es probable que desee una regla como

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

Fuente

2012-02-27 22:28:20 paislee

Sólo para añadir a las respuestas anteriores: padding-left se sangrar las palabras, pero no el punto de bala, mientras que se margin-left sangrar la viñeta también.

Ejemplo: http://jsfiddle.net/GMLxv/

Fuente

2013-04-15 08:10:11 evophage

que tenían el mismo problema que tú.

Hay una regla en type.less que anula la sangría para las listas:

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

acabé anulando esta regla:

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

sangría en las listas anidadas es ahora de nuevo.

Fuente

2013-04-19 05:31:20

Es posible que haya configurado los puntos de viñetas para que estén dentro de los elementos de la lista en lugar de antes, lo que cambiaría su apariencia de manera significativa.

El CSS para aplicarlo: ul { list-style-position: inside; }

Leer más sobre list-style-position.

Ejemplo: https://jsfiddle.net/g0k0obwh/

Fuente

2015-09-16 21:27:17 Marius

Podría ser que algún estilo esté estableciendo esto en uno u otro ... simplemente aplique su configuración explícita quizás. – Marius

El uso de rutina de carga se puede hacer eso mediante la codificación de la siguiente manera. Solo péguelo en su JSP o HTML y pruébelo. Puede ir a través de este enlace para obtener más información.

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; 
}

Fuente

2016-07-11 03:54:58

hacer la forma más sencilla utilizando grupo de lista de

esto da una lista anidada:

<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>

Fuente

2016-07-11 06:04:12 pradeep

Sangría en listas anidadas en HTML/CSS

Respuesta

Cuestiones relacionadas