भाई की चौड़ाई बढ़ने पर उत्तरदायी डिज़ाइन

Question

मैं उस वेबसाइट के साथ एक बग को ठीक करने की कोशिश कर रहा हूं जहां शीर्षलेख में दो तत्व होते हैं, एक div बाईं ओर तैरता है और ul फ़्लोट किया गया है।

आम तौर पर, दोनों एक दूसरे के बगल में बैठते हैं, लेकिन कभी-कभी ul की सामग्री बड़ी है और दोनों को जोड़ने के रूप में div लाइन पर रहता है लेकिन अगली पंक्ति में ul बूँदें। मैं div पर चौड़ाई बलिदान करके और दो पंक्तियों पर पाठ रखने से इसे रोकना चाहता हूं।

सबसे अच्छा मैं अब तक करने में सक्षम हूं, बाईं ओर div पर चौड़ाई निर्धारित करना है, लेकिन यह केवल दो लाइनों को बनाता है जब इसे केवल तब ही किया जाना चाहिए जब इसे आवश्यकता हो। डिस्प्ले और न्यूनतम/अधिकतम चौड़ाई के आसपास मैंने कोशिश की हर दूसरी चीज पर बहुत अधिक असर नहीं पड़ा है।

मैं यहाँ पूर्ण मार्कअप पोस्ट करेंगे नहीं, लेकिन यह इस

<div id="minibasketAndLogin"> 
    <div id="login"><!--omitted--></div> 
    <ul class="basketLoginList"> 
     <li><!--there are 7 li's in this list--></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</ul> 

सीएसएस भी बल्कि घुमावदार है की तरह एक छोटे से कुछ हो जाता है तो मैं इसे यहाँ शामिल नहीं किया जाएगा, लेकिन पूरी बात पाया जा सकता है this fiddle में।

मूल रूप से, ul फैलाता है, div को कम करना चाहिए और यह टेक्स्ट को अगली पंक्ति में लपेटना चाहिए।

धन्यवाद

Answer 1

मैं इस तरह यह करना होगा - table-cell के रूप में अंदर table और दो तत्वों के रूप में कंटेनर सेट, इसलिए वे हमेशा एक दूसरे के बगल रहना होगा। सूची आइटम को एक पंक्ति पर रखने के लिए, को ul पर सेट करें, और li पर सेट करें।

jsfiddle

#minibasketAndLogin { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
#login, .basketLoginList { 
 
    display: table-cell; 
 
} 
 
.basketLoginList { 
 
    white-space: nowrap; 
 
} 
 
.basketLoginList li { 
 
    display: inline-block; 
 
    border: 1px solid; 
 
}

<div id="minibasketAndLogin"> 
 
    <div id="login">Login as John Doe</div> 
 
    <ul class="basketLoginList"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     <li>5</li> 
 
     <li>6</li> 
 
     <li>7 bla bla bla bla bla bla bla bla bla bla</li> 
 
    </ul> 
 
</ul>