डिवी तत्वों के बीच लाइन ब्रेक को कैसे प्रतिबंधित करें जब कंटेनर चौड़ाई बच्चों की चौड़ाई के योग से कम है - एचटीएमएल, सीएसएस, सीएसएस 3

मेरे पास एक कंटेनर div एलिमेंट है और कुछ बच्चे div एलिमेंट्स हैं।

<div>
<div>foo</div>
<div>bar</div>
<div>baz</div>
<div>

मैं क्षैतिज रूप से लाइन ब्रेक के बिना एक लाइन में बच्चों के तत्वों को सूचीबद्ध करना चाहता हूं। मैंने पढ़ा कि मैं उपयोग कर सकता हूं white-space:nowrap कंटेनर तत्व और / या पर display:inline या display:inline-block बच्चों पर। यह तब काम करता है जब कंटेनर की चौड़ाई काफी लंबी होती है।

हालाँकि, मेरे पास एक कंटेनर है जिसकी चौड़ाई हो सकती हैबच्चों की चौड़ाई के योग से कम हो जाते हैं। ऊपर उल्लिखित तरीका इस तरह के मामले में लाइन ब्रेक को प्रतिबंधित नहीं करता है। मैं अब भी लाइन ब्रेक को प्रतिबंधित करना चाहता हूं और बच्चों के अतिरिक्त भाग के साथ उन्हें एक लाइन पर रहने के लिए मजबूर करना चाहता हूं hidden यदि कंटेनर की चौड़ाई पर्याप्त नहीं है। मैं उसे कैसे कर सकता हूँ?

उत्तर:

जवाब के लिए 2 № 1
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
#parent{
overflow: hidden;
white-space: nowrap;
}

.child{
display: inline-block;
width: 200px;
height: 200px;
}

http://jsfiddle.net/YAp6k/


संबंधित सवाल
सबसे लोकप्रिय