div nidificati più grandi di div genitore

Sto utilizzando CSS per applicare una barra di scorrimento creata utilizzando JavaScript.div nidificati più grandi di div genitore

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

E questo è il violino: http://jsfiddle.net/w27wM/8/

Perché il div interno in qualche modo più grande della div genitore? Anche con margine e paddings impostati su 0, il problema rimane.

fonte

2012-03-06 F21

si può utilizzare 'visualizzazione: blocco-e' float: left'; sembra essere un problema con 'display: inline-block'. Inoltre, il bordo occupa 2px in alto e in basso, quindi è necessario impostare l'altezza su 8px. – mowwwalker

Problema risolto cambiando tutto lo display: inline-block in float: left.

Il problema potrebbe essere correlato a this question, ma la rimozione di tutti gli spazi bianchi non ha risolto il problema per me. Ciò potrebbe essere dovuto al fatto che il nodo sia stato creato in javascript.

fonte

2012-03-07 00:15:14 F21

Il div .scrollbar non ha una larghezza esplicita, quindi assume il valore predefinito = 100% della larghezza data dal suo genitore.

La traccia .scrollbar ha una larghezza esplicita di 970px che è oltre la larghezza del genitore e del genitore del genitore. Pertanto, .scrollbar finisce più sottile della sua larga traccia .scrollbar-track.

Perché stai impostando la barra di scorrimento in modo esplicito ma non facendo lo stesso per la .scrollbar (parent)?

fonte

2012-03-07 00:03:54 ghbarratt

Ho provato la larghezza di impostazione sia per '.scrollbar-track' e' .scrollbar', ma sto ancora ottenendo il padding indesiderato (superiore e inferiore) nel pollice. – F21

Lo spazio tra le parti del pollice è dovuto agli spazi trovati tra gli span. Dovrai rimuovere tutto lo spazio bianco testuale per far allineare gli span uno accanto all'altro, o quello o cambiare le loro proprietà di visualizzazione. Vedi http://jsfiddle.net/w27wM/61/ – ghbarratt

Se provi a impostare l'altezza più corta dell'altezza della linea, allora è una buona idea impostare l'altezza della linea esplicitamente, insieme all'altezza. Anche un 'overflow: hidden;' può essere utile in quei casi speciali. Dai un'occhiata a questo: http://jsfiddle.net/w27wM/62/ – ghbarratt

È un problema semplice. Per impostazione predefinita, l'altezza della linea di estensione è 20 px. Un elemento di blocco in linea legge l'altezza della linea rispetto all'allineamento verticale.

Quindi la soluzione è o specificare

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

Esempio:

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

.scrollbar-thumb span{ 
    float: left; 
}

fonte

2012-03-07 05:46:59 sreejesh

div nidificati più grandi di div genitore

risposta

Problemi correlati