Sangría Lista en HTML y CSS

Soy nuevo en CSS y trabajo con la lista. He intentado utilizar uno de los códigos que vi en w3schools que muestra cómo se va a sangrar listas:Sangría Lista en HTML y CSS

<html> 
<body> 

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

</body> 
</html>

Mi css está anulando así todo apears en la misma línea vertical. ¿Hay algún código CSS que pueda usar localmente en la lista para anular el archivo css principal? Cualquier ayuda sería apreciada.

Fuente

2011-08-08 Alan

Pero no veo su CSS ... – BoltClock

@BoltClock: De acuerdo con la especificación de sus preguntas, creo que quiso preguntar cómo anular el CSS principal, localmente.En ese caso, su CSS principal es irrelevante, pero si no es el caso, entonces sí. –

Sí, sólo tiene que utilizar algo como:

ul { 
    padding-left: 10px; 
}

y va a chocar cada ul sucesivas por 10 píxeles.

Working jsFiddle

Fuente

2011-08-08 17:08:39

Normalmente, todas las listas están siendo representada verticalmente de todos modos. Entonces, ¿quieres mostrarlo horizontalmente?

De todos modos, solicitó anular el archivo css principal y establecer algunos css localmente. No puede hacerlo dentro de <ul> con style="", que se aplicaría a los niños (<li>).

es lo más parecido a la manipulación localmente su lista sería:

<style> 
    li {display: inline-block;} 
</style> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
     <li>Black tea</li> 
     <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul>

Fuente

2011-08-08 17:20:17

Dudo mucho que quisiera que se vean los elementos horizontales mientras pregunta acerca de la sangría de las listas. –

Igual, pero es un ejemplo de CSS local. Lo dudo mucho, quiso establecer el relleno-izquierda: 10px; también..? –

Suena como algunos de sus estilos se está restableciendo.

Por defecto en la mayoría de los navegadores, ul s y s tienen olmargin y padding añaden a ellos.

Puede anular este (y muchos lo hacen) mediante la adición de una línea a su css al igual que

ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST 
    margin:0; 
    padding:0; 
}

En este caso, se debe retirar el elemento de esta lista o añadir un margin/padding espalda, como así

ul{ 
    margin:1em; 
}

Ejemplo: http://jsfiddle.net/jasongennaro/vbMbQ/1/

Fuente

2011-08-08 17:28:47

I resuelto el mismo problema mediante la adición de texto-guión a la lista anidada.

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul id="list2"> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

#list2 
{ 
text-indent:50px; 
}

Fuente

2012-10-21 07:54:32

una mejor solución sería evitar el uso de id o clase en el marcado y hacer esto estrictamente con css. margen o relleno son una mejor opción. – Octopus

se puede utilizar [hermanos adyacentes combinadores] como se describe en la Recomendación W3 CSS Selectores 1 esta manera puede utilizar una señal + (o incluso una tilde ~) aplicar un relleno para el ul etiqueta anidada, como se descrito en su pregunta y obtendrá el resultado que necesita. También creo que lo que quiere es anular localmente el CSS principal. Usted puede hacer esto:

<style> 
    li+ul {padding-left: 20px;} 
</style>

De esta manera el interior ul se pueden anidar incluyendo las balas de los elementos li. ¡Desearía que esto fuera útil! =)

Fuente

2014-02-13 18:17:49 Metafaniel

Respuesta

Cuestiones relacionadas