उल की शेष चौड़ाई के लिए अंतिम ली बढ़ाएं?

Question

मुझे थोड़ी देर के लिए इस बारे में परेशान किया गया है। यहां मेरे पास अब है:

------------------------------------------------------------------------------- 
|     |     |      | 
|  Item 1  |  Item 2  |  Last item  | 
|     |     |      | 
------------------------------------------------------------------------------- 

वहां, आखिरी ली केवल उल का हिस्सा ले रही है। मुझे इसे इस तरह दिखने की ज़रूरत है:

------------------------------------------------------------------------------- 
|     |     |          | 
|  Item 1  |  Item 2  |    Last item    | 
|     |     |          | 
------------------------------------------------------------------------------- 

मैं जावास्क्रिप्ट (या Jquery) का उपयोग नहीं कर सकता। मैं प्रत्येक ली की चौड़ाई निर्धारित नहीं करना चाहता, क्योंकि पाठ का आकार भिन्न हो सकता है, और मुझे नहीं पता कि कितने ली होंगे। मेरे पास 5 या 3 हो सकता है।

मैं इसे कैसे पूरा करूं? धन्यवाद।

यहां मेरे कुछ कोड के साथ एक jsfiddle है। उल के विस्तार के लिए मुझे हल्का रंग चाहिए। JSFIDDLE

Answer 1

आप सभी तत्वों तैर सकते हैं, लेकिन करने के लिए पिछले बाएं।

अंतिम तत्व का बॉक्स मॉडल तब इन फ़्लोटेड सूची आइटमों के पीछे विस्तारित होगा (भले ही सामग्री नहीं है)। overflow:hidden इस व्यवहार को रोक देगा; बॉक्स मॉडल तब शुरू होगा जब आखिरी फ्लोटेड आइटम समाप्त होता है, जैसे कि फ्लोट किए गए आइटम अभी भी पृष्ठ के प्राकृतिक प्रवाह में थे।

ul, li{ 
 
    margin:0; 
 
    padding:0; 
 
    
 
    list-style-type:none; 
 
} 
 

 
ul li{ 
 
    display: block; 
 
    float:left; 
 
} 
 

 
ul li:last-child{ 
 
    background-color: #ddd; 
 

 
    float:none; 
 
    overflow:hidden; 
 
}

<ul> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>I will extend to the end of the page.. No matter how far. I will also not drop beneath my previous items, even if the text in here requires me to span over multiple lines.</li>  
 
</ul>

आपके नए जोड़े गए JSFiddle का एक संपादित करें:

JSFiddle

Answer 2

ul>li:last-of-type {width:whatever} 

तो दो ली के पहले अंतिम फ्लोट जाएगा: छोड़ दिया और दोनों पर 20% है और पिछले एक 60% हो सकता है;

इसके अलावा

ul {overflow:auto;} 

साथ flaots स्पष्ट और% सही रखने के लिए भूल गया नहीं है इसलिए सीमाओं से बच नहीं है:

ul>li {box-sizing:border-box;}