tag - table column html

Rellena toda la línea de LI usando CSS

Question

Tengo estos anidados ul y li . Cuando relleno el color de fondo, li anidado deja una porción sangrada blanca. Tengo un número de li como este que se llena desde la base de datos, por lo que no puedo dejar margen para texto individual en li. ¿Cómo puedo hacer esto para que el fondo llene toda la línea junto con la sangría?

Ahora mismo se ve así

Lo quiero asi

¿Alguna sugerencia de cómo se puede hacer esto? Gracias por adelantado. No puedo cambiar el marcado html ya que tendré que cambiar mucho código. ¿Hay alguna manera de hacer esto usando este marcado? estos li provienen de la consulta de db, por lo que no tengo el número exacto de li en este caso.

Demostración http://jsbin.com/uReBEVe/1/

Answer 1

Solución flexible de anidamiento multinivel

Esto es muy similar a otra pregunta que respondí here , y a continuación le compuse una solución similar. Querrá un html válido al tener todos los elementos li anidados dentro de su propia ul (como han señalado otros aquí), y sería mejor controlar todo esto por alguna clase en la ul más externa (aunque eso no es necesario, pero hace referencia a esto lista mucho más fácil).

La clave aquí es proporcionar el background través del :before pseudo-elemento, que está diseñado para abarcar todo el ancho de la ul .

Aquí está mi demo jsbin.

HTML

 <ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>

CSS

.full-width-list {
position: relative;
padding: 0 0 0 4px;
}
.full-width-list ul {
margin: 0;
padding: 0
}
.full-width-list li {
list-style:none;
padding: 0;
margin: 0;
height: 1.2em;
line-height: 1.2em;
}
.full-width-list ul > li {
margin-top: 4px;
padding: 0 0 0 36px;
}
.full-width-list li:first-child:before {
content: '''';
height: 1.2em;
position: absolute;
left: 0;
right: 0;
z-index: -1;
background:red;
}
.full-width-list li:first-child:hover:before {
background:green
}

Limitaciones

Esta solución tiene dos limitaciones principales:

1. Ninguno de los elementos ul o li puede tener una position no sea el conjunto static predeterminado en ellos, ya que :before pseudoelemento, los elementos li deben tener su único elemento principal posicionado como el .full-width-list la .full-width-list .
2. Tiene que haber una height establecida en los elementos li . En mi ejemplo, uso 1.2em , pero independientemente de la height que establezca, significa que los elementos li no pueden ir a dos o más líneas de texto (por lo que esta solución solo funciona con una sola línea de texto).

Answer 2

1) Su HTML no es válido (falta <li> alrededor de <ul> )

2) La única forma de hacer que la sangría funcione como esperaba es una regla de CSS para cada nivel.

ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...

http://jsbin.com/uReBEVe/12/edit

Answer 3

@AsrafulHaque tiene la idea correcta sobre el uso del relleno para ampliar el ancho del fondo sin cambiar las sangrías de anidamiento.

Sin embargo, como no sabes cuántos <li> habrá, no puedes esperar que esto sea una solución CSS pura.

Estás intentando hacer una cosa bastante incómoda, pero sería posible hacer un bucle sobre ellos e inyectar un relleno dinámico mediante javascript / jquery o algo así:

i = 40;
$(''img.yourImageClass'').each(function() {
$(this).css(''padding-left'', i+''px'');
i = i + 40;
});

También podría hacer este tipo de inyección con preprocesamiento en el lado del servidor, estoy seguro, pero definitivamente no solo con CSS. Necesita una solución dinámica (es decir, la capacidad de usar variables) para admitir su salida dinámica.

Answer 4

Aquí está la estructura HTML adecuada que debe seguir, y cada elemento UL tiene dos elementos LI. Uno para el valor de cada línea y otro como el principal para el siguiente valor sangrado.

<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
<li>
</ul>

Para el CSS, esta solución requiere que tenga un número máximo de ''niveles'' en la jerarquía de su lista (ver comentario del código)

li {
list-style:none;
padding-left:0px;
box-sizing:border-box;
}
ul {
padding-left:0
}
ul > li:nth-of-type(1):hover {
background:green
}
ul li:nth-of-type(1) {
padding-left:50px;
background:red;
margin-top:4px
}
ul li li:nth-of-type(1) {
padding-left:100px;
}
ul li li li:nth-of-type(1) {
padding-left:150px;
}
/*
Continue incrementing the padding for the li
children for however many levels you want
*/

Tome nota, el selector enésimo de tipo es compatible con todos los navegadores, EXCEPTO para IE8 y versiones anteriores.

Vea JSBin para ver un ejemplo de trabajo: http://jsbin.com/uReBEVe/51

¡Buena suerte!

Answer 5

Esto funciona a profundidades arbitrarias sin hacks o sin sentido.

Las personas que dicen "no puedo" e "imposible" en este hilo realmente necesitan aprender qué significan esas palabras con respecto a CSS (en general, "aún no he descubierto cómo hacerlo") :)

La idea es simple: establezca un: antes del selector que se ajusta a los bordes izquierdo y derecho mediante la posición absoluta y pinta un color de fondo. Necesitas establecer un índice z: para ponerlo detrás de su contenido, un contenido: ''/ 0020'' para forzarlo a pintar (eso es un espacio sin ruptura) y estás bien.

Puede enlazar esto configurándolo dentro de una posición: contenedor relativo.

<!doctype html>
<html>
<head>
<style>
li {
list-style-type : none;
margin-bottom : 0.25em;
}
li:before {
position : absolute;
left : 0;
right : 0;
background-color : #eef;
content : "/00a0";
z-index : -1;
}
</style>
</head>
<body>
<ul>
<li>Test</li>
<li><ul>
<li>Test</li>
<li><ul>
<li>Test</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>

Answer 6

Lo mejor es usar una estructura que facilite la administración de bases de datos , html y estilo (CSS).

HTML:

<body>
<ul class="main">
<li>1.</li>
<li><ul>2</ul></li>
<li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>

CSS:

.main{
position:relative;
right:40px;
}
li{
list-style:none;
background:red;
margin-top:1px;
}

Violín 1.

No sé si ul no contiene li es válido o no es válido. Si no es válido, puede usar:

<body>
<ul class="main">
<li>1.</li>
<li><ul><li>2</li></ul></li>
<li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>

Violín 2

Answer 7

No podría estar lo suficientemente seguro acerca de la consistencia del navegador hasta la limpieza y la consistencia del marcado, triste pero cierto. Todas las sugerencias de arriba se ven bien, hay un poco de alternativa desde mi punto de vista práctico.

El marcado:

 <ul>
<li>A</li>
<li><p>B</li>
<li><p><p>B</li>
<li><p><p><p>B</li>
....
</ul>

Y CSS:

li p {
padding-left: 1em;
display: inline;
}

JSbin

p etiqueta p es opcional para cerrar en un subconjunto de HTML, y generalmente debería funcionar en todos los navegadores, sin importar el tipo de documento. En caso de que esté en xHTML y se preocupe por la validación, una opción podría ser usar etiquetas de cierre como:

 <ul>
<li>A</li>
<li><p></p>B</li>
<li><p></p><p></p>B</li>
....
</ul>

Answer 8

Por defecto, <ul> tiene padding-left para acomodar el punto de bala.

Si agrega esto a su CSS:

ul {padding-left:0}
ul>li {padding-left:40px}

Deberías obtener el efecto que deseas.

EDITAR: También necesita corregir su HTML: p <ul> SOLO puede tener <li> como hijos.

Answer 9

Prueba esto:

<ul class="lvl1">
<li>A</li>
<ul class="lvl2"><li>B</li>
<ul class="lvl3"><li>B</li></ul>
</ul>
</ul>
li {
background: none repeat scroll 0 0 #FF0000;
list-style: none outside none;
margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}

Vea aquí: http://jsfiddle.net/x5K4a/

Answer 10

Puede agregar este CSS en su código para obtener los resultados deseados:

li {
list-style: none;
background: red;
margin-top: 4px;
}
ul {
padding: initial !important;
}
ul ul li {
padding-left: 40px;
}
ul ul ul li {
padding-left: 80px;
}
li:hover {
background: green;
}

El resultado en jsbin está aquí: http://jsbin.com/uReBEVe/33/edit

Answer 11

Puedes hacer asi

HTML

 <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="mainUL">
<li>A</li>
<ul><li>B</li>
<ul><li>C</li></ul>
</ul>
</ul>
</body>
</html>

Código CSS

li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:''.''; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}

Puede ver la demostración de trabajo: http://jsbin.com/uReBEVe/71/edit

Answer 12

Puedes hacer esto con :before hackear ya que no tienes acceso al código

Trabajando jsbin demo

CSS

li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:''.''; position:absolute; left:0; z-index: -1;}

Answer 13

Si es solo una cuestión de color de fondo, puedes usar una sombra del mismo color. http://codepen.io/gc-nomade/pen/fxBAl (estructura html corregida)

<ul class="ulparent">
<li>
<p>A</p>
<ul>
<li>
<p>B</p>
<ul>
<li>
<p>B</p></li>
</ul>
</li>
</ul>
</li>
</ul>

.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}

De lo contrario, si se trata de una imagen de fondo, usaría pseudoelemento y background-attachment:fixed; (demo incluida en codepen, usando un gradiente lineal como imagen)

Answer 14

Su marca está rota, debe anidar li en una única ul como esta:

<ul>
<li>Text</li>
<li>Text 1</li>
</ul>

Este fue tu marcado

<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
<ul>

Supongo que ves por qué esto está mal.

He arreglado el JSBin para ti y tiene el efecto correcto.

EDITAR: Por supuesto, puede agregar el padding-left haciendo un bucle sobre todos los li s usando javascript.

Answer 15

Tanto UL como OL heredan márgenes. Su solución sería poner a cero el margen:

ul, ol
{
margin:0;
}

Answer 16

Un jsfiddle muy, muy delicado, pero funciona con un pequeño empujón en la dirección correcta de jQuery. No es una gran resolución, pero una resolución no obstante.

HTML

<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
</ul>

CSS

ul {
list-style-type:none;
margin-top:5px;
padding-left:40px;
float:left;
width:400px;
overflow:hidden;
background:#ff0000;
}
li {
padding-top:5px;
}
ul div {
position:absolute;
left:0;
width:100%;
border-top:3px solid #fff;
}

jQuery

$(document).ready(function(){
$(''ul'').prepend(''<div></div>'');
});

JSFiddle aquí . Esperemos que esto funcione para usted!

Answer 17

Voy a darles la idea correcta de cómo aplicar las reglas de css sobre el contenido HTML. A continuación, las reglas de css que he creado, simplemente cópielas y vea la respuesta. ¡Es el combinador de niños que usé! Inspecciono todas las respuestas proporcionadas por Los diferentes usuarios que no se siguen las reglas de css en absoluto. ¡Sólo házmelo saber! Espero la respuesta!

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
li{
list-style:none;
background:red;
margin-top:4px;
}
body>ul>ul>li{
margin: 4px 0 0 -40px;
}
body>ul>ul>ul>li{
margin: 4px 0 0 -80px;
}
body>ul>ul>li {
padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
padding:0px 0px 0px 80px;
}
li:hover{
background:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

Guarde la imagen al principio en su unidad local o arrastre y suelte esta imagen en el nuevo navegador de pestañas para ver más visible.

Answer 18

de su demo:

si aplica

ul{ padding:0; margin:0; }

Todo se sienta a ras de la pared como quieras.

si quieres sangrías de texto

ul ul li{ text-ident:20px; }

que esta anidando solo se dirigirá a los li que están en ul que están anidados en ul. entonces lo que quieres funciona y no necesitas cambiar tu código

También puedes seguir anidando ese código.

agrega más ul''s y li''s dependiendo de la profundidad de tu estructura, pero esto te dará una buena base