Divs anidados más grandes que div principal

Estoy usando CSS para aplicar una barra de desplazamiento que se crea mediante JavaScript.Divs anidados más grandes que div principal

.scrollbar-track{ 
 
    background: black; 
 
    height: 10px; 
 
} 
 
    
 
.scrollbar-thumb{ 
 
    cursor: default; 
 
    border: 1px red solid; 
 
    width: 50px; 
 
    padding: 0; 
 
} 
 

 
.scrollbar-thumb-first{ 
 
    display: inline-block; 
 
    background: green; 
 
    width: 5px; 
 
    height: 10px; 
 
} 
 
    
 
.scrollbar-thumb-middle{ 
 
    display: inline-block; 
 
    background: red; 
 
    height: 10px; 
 
    width: 20px; 
 
} 
 
    
 
.scrollbar-thumb-last{ 
 
    display: inline-block; 
 
    background: blue; 
 
    width: 5px; 
 
    height: 10px; 
 
}

<div class="scrollbar"> 
 
    <div class="scrollbar-track" style="width: 970px;"> 
 
     <div class="scrollbar-thumb"> 
 
      <span class="scrollbar-thumb-first"></span> 
 
      <span class="scrollbar-thumb-middle"></span> 
 
      <span class="scrollbar-thumb-last"></span> 
 
     </div> 
 
    </div> 
 
</div>

Y este es el violín: http://jsfiddle.net/w27wM/8/

¿Por qué es el div interior de alguna manera más grande que el div padre? Incluso con el margen y los pads establecidos en 0, el problema aún persiste.

Fuente

2012-03-06 F21

¿Se puede usar 'pantalla: block' y' float: left'; parece ser un problema con 'display: inline-block'. Además, el borde ocupa 2px arriba y abajo, por lo que necesitaría establecer las alturas a 8px. – mowwwalker

Problema resuelto al cambiar todos los display: inline-block a float: left.

El problema puede estar relacionado con this question, pero al eliminar todos los espacios en blanco no lo solucioné. Esto podría deberse al nodo que se está creando en javascript.

Fuente

2012-03-07 00:15:14 F21

El .scrollbar div no tiene un ancho explícito, por lo que asume el valor predeterminado = 100% del ancho proporcionado por su elemento primario.

La .scrollbar-track tiene un ancho explícito de 970px que está más allá del ancho del elemento primario y el elemento primario del elemento primario. Por lo tanto, .scrollbar termina más delgado que su ancho child .scrollbar-track.

¿Por qué está configurando la barra de desplazamiento de forma explícita pero no haciendo lo mismo para .scrollbar (principal)?

Fuente

2012-03-07 00:03:54 ghbarratt

Se ha intentado configurar el ancho tanto para '.scrollbar-track' como' .scrollbar', pero todavía obtengo el relleno indeseado (arriba y abajo) en el pulgar. – F21

El espacio entre las piezas del pulgar se debe a los espacios que se encuentran entre los tramos. Tendrá que eliminar todo el espacio en blanco textual para que los tramos se alineen uno al lado del otro, ya sea eso o cambie sus propiedades de visualización. Consulte http://jsfiddle.net/w27wM/61/ – ghbarratt

Si alguna vez intenta establecer la altura más corta que la altura de la línea, entonces es una buena idea establecer la altura de la línea de forma explícita, junto con la altura. También un 'overflow: hidden;' puede ser útil en esos casos especiales. Eche un vistazo a esto: http://jsfiddle.net/w27wM/62/ – ghbarratt

Es un problema simple. Por defecto, la altura de línea de tramo es 20px. Un elemento de bloque en línea lee altura de línea para alinear verticalmente.

Así que la solución es o bien especificar

line-height: 10px; or float: left;

Ej:

.scrollbar-thumb span{ 
    line-height: 10px; 
}

.scrollbar-thumb span{ 
    float: left; 
}

Fuente

2012-03-07 05:46:59 sreejesh

Divs anidados más grandes que div principal

Respuesta

Cuestiones relacionadas