नेस्टेड divs div div से बड़े

Question

मैं जावास्क्रिप्ट का उपयोग कर बनाई गई स्क्रॉल बार को त्वचा के लिए सीएसएस का उपयोग कर रहा हूं। http://jsfiddle.net/w27wM/8/

भीतरी div किसी भी तरह माता पिता div से भी बड़ा क्यों है:

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

और इस बेला है? यहां तक ​​कि मार्जिन और पैडिंग 0 पर सेट होने के साथ भी, समस्या अभी भी बनी हुई है।

Answer 1

सभी display: inline-block से float: left बदलकर समस्या हल हो गई।

समस्या this question से संबंधित हो सकती है, लेकिन सभी व्हाइटस्पेस को हटाने से यह मेरे लिए ठीक नहीं हुआ। यह जावास्क्रिप्ट में नोड बनने के कारण हो सकता है।

Answer 2

.scrollbar div को स्पष्ट चौड़ाई नहीं दी गई है, इसलिए यह अपने माता-पिता द्वारा दी गई चौड़ाई का डिफ़ॉल्ट = 100% मानता है।

.scrollbar-track को 970 पीएक्स की स्पष्ट चौड़ाई दी गई है जो माता-पिता और माता-पिता के माता-पिता की चौड़ाई से परे है। इस प्रकार, .scrollbar अपने विस्तृत बच्चे की तुलना में पतला होता है। स्क्रॉलबार-ट्रैक।

आप स्क्रॉलबार-ट्रैक को स्पष्ट रूप से क्यों सेट कर रहे हैं लेकिन .scrollbar (पैरेंट) के लिए ऐसा नहीं कर रहे हैं?

Answer 3

यह एक साधारण समस्या है। डिफ़ॉल्ट रूप से अवधि रेखा-ऊंचाई 20px है। एक इनलाइन-ब्लॉक तत्व लंबवत-संरेखण के लिए रेखा-ऊंचाई पढ़ता है।

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

या

.scrollbar-thumb span{ 
    float: left; 
}