कैसे एक div की सामग्री को लपेटने के लिए नहीं?

243

मुझे divइसमें दो बटन के साथ एक निश्चित-चौड़ाई मिली है। यदि बटन के लेबल बहुत लंबे हैं, तो वे लपेटते हैं - एक बटन पहली पंक्ति पर रहता है, और अगला बटन इसके बगल में इसके नीचे होता है।

मैं divविस्तार करने के लिए कैसे मजबूर कर सकता हूं ताकि दोनों बटन एक लाइन पर हों?

html css

— JamesBrownIsDead
स्रोत

मैं अपने OpenID के साथ doctype पर भी लॉगिन नहीं कर सकता हूँ, इसलिए सबसे अच्छा सवाल यहाँ है।

— स्टीफन केंडल

3

@nicholaides मैं मानता हूँ कि यह सिद्धांत पर काम करेगा लेकिन मुझे लगता है कि यह एसओ पर भी पूरी तरह से वैध है।

— टीएम।

454

कोशिश करो white-space: nowrap;। । ।

— मारेक करबर्ज
स्रोत

6

FYI करें: MDN के डॉक्स केwhite-space अनुसार , nowrapमान IE 6+ में समर्थित है, हालांकि अन्य मान केवल IE 8+ हैं

— वाल्टर रोमन

73

दोनों के संयोजन float: left; white-space: nowrap;ने मेरे लिए काम किया।

उनमें से प्रत्येक ने स्वतंत्र रूप से वांछित परिणाम प्राप्त नहीं किया।

— क्रिस नोलेट
स्रोत

6

मुझे इसके पीछे के कारण का पता नहीं है, लेकिन मैंने अपने माता-पिता को कंटेनर display:flexऔर बच्चे के कंटेनर को सेट कर दिया display:inline-blockऔर वे बच्चों की संयुक्त चौड़ाई के बावजूद इनलाइन बने रहे।

साथ खिलौना की जरूरत नहीं थी max-width, max-height, white-space, या कुछ और।

आशा है कि किसी की मदद करता है।

— elPastor
स्रोत

1

यह मेरे लिए तब काम आया जब ऊपर सूचीबद्ध अन्य दृष्टिकोणों ने नहीं किया। जरूरत सभी मैं था display: flex। कुछ और की जरूरत नहीं थी

— हेरिमनकोडर

4

यदि आप डिव के लिए न्यूनतम चौड़ाई की परवाह नहीं करते हैं और वास्तव में सिर्फ डिव को पूरे कंटेनर में नहीं फैलाना चाहते हैं, तो आप इसे बायीं ओर घुमा सकते हैं - अपनी सामग्री का समर्थन करने के लिए डिफ़ॉल्ट रूप से फ़्लोट किए गए डिव।

<form>
    <div style="float: left; background-color: blue">
        <input type="button" name="blah" value="lots and lots of characters"/>
        <input type="button" name="blah2" value="some characters"/>
    </div>
</form>

— निकोलस बेकर
स्रोत

0

यदि आपके div में एक निश्चित-चौड़ाई है, तो इसका विस्तार नहीं होना चाहिए, क्योंकि आपने इसकी चौड़ाई तय कर ली है। हालांकि, आधुनिक ब्राउज़र एक min-widthसीएसएस संपत्ति का समर्थन करते हैं।

आप सीएसएस अभिव्यक्तियों का उपयोग करके या ऑटो चौड़ाई का उपयोग करके और कंटेनर में स्पेसर ऑब्जेक्ट का उपयोग करके पुराने IE ब्राउज़रों में न्यूनतम-चौड़ाई की संपत्ति का अनुकरण कर सकते हैं। यह समाधान सुरुचिपूर्ण नहीं है, लेकिन यह चाल हो सकती है:

<div id="container" style="float: left">
  <div id="spacer" style="height: 1px; width: 300px"></div>
  <button>Button 1 text</button>
  <button>Button 2 text</button>
</div>

— श्री चमकदार और नई and 安
स्रोत

-2

बटन को एक ही पंक्ति में रहने के लिए मजबूर करने से वे उस div की निश्चित चौड़ाई से आगे निकल जाएंगे जो वे अंदर हैं। यदि आप इसके साथ ठीक हैं तो आप पहले से ही div के अंदर एक और div बना सकते हैं। बदले में नई डिव बटनों को पकड़ लेगी और दोनों जगह एक लाइन में रहने के लिए दो जगह की जरूरत होती है।

यहाँ एक उदाहरण है:

<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
    <div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
       <button id="button1">1</button>
       <button id="button2">2</button>
    </div>
</div>

आप सीमा के बाहर सामग्री के ठिकाने के लिए अतिप्रवाह संपत्ति पर विचार करना चाह सकते हैं parentDiv।

सौभाग्य!

— Zoid
स्रोत