2010-08-17 26 views
20

मेरे पास निम्न li आइटम है:चलो शेष चौड़ाई भरने दें?

<li> 
    <span style='float:left; background-color:red'>a</span> 
    <span style='float:left; background-color:green'>b</span> 
</li> 

मुझे अपने मूल ली में जो भी चौड़ाई शेष है उसे भरने के दाईं ओर की अवधि चाहिए। क्या ऐसा करने के लिए कोई रास्ता है?

धन्यवाद

उत्तर

18

आप उनमें से प्रत्येक के लिए छोड़ दिया, केवल पहले एक फ्लोट करने के लिए नहीं करना चाहते हैं, और फिर ब्लॉक मोड में दूसरा एक प्रदर्शन करना:

<li> 
    <span style='float:left; background-color:red'>a</span> 
    <span style="display: block; background-color:green;">b</span> 
</li> 
+8

यह सही नहीं है (न ही दूसरा जवाब है): अवधि शेष चौड़ाई को भरती नहीं है, यह पूरी चौड़ाई भरती है - दो स्पैन ओवरलैप। – Daddy32

+4

आप दूसरे ओवर पर 'ओवरफ्लो: छुपा; 'सेट करके स्पैन को ओवरलैपिंग से रोक सकते हैं। – pvans

7

ही समाधान के लिए देखा, लेकिन केवल इस पाया जो मेरे लिए महान काम किया:

<li> 
    <span style='display: table-cell; background-color:red'>a</span> 
    <span style='display: table-cell; width: 100%; background-color:green'>b</span> 
</li> 

आपको बस सिर्फ तालिका सेल प्रदर्शित और रों उपयोग कर रहा है et filler अवधि चौड़ाई चौड़ाई 100%। मैंने कोशिश की सभी अन्य समाधानों के लिए मेरे लिए काम नहीं किया।

+0

आपने दूसरे अवधि में टाइपो बनाया: "dispaly"। स्टाइल सेटिंग करते समय उद्धरण परंपरागत रूप से दोगुना होते हैं, इसलिए यह होना चाहिए: शैली = "..." –

+3

@ लेचोसिंस्की धन्यवाद, तय। "डबल-उद्धृत परंपराओं" के बारे में क्या - यह सुनिश्चित नहीं है कि परंपराएं आईटी/विज्ञान में कोई समझ लेती हैं। W3.org किसी भी प्रकार के उद्धरण btw के लिए कोई वरीयता नहीं देता है। –

संबंधित मुद्दे