html - Dependent width on width of other elements in CSS -
HTML:
& lt; div & gt; & LT; ul & gt; & Lt; li & gt; मद & lt; / li & gt; & Lt; li & gt; संपर्क & lt; / li & gt; & Lt; li & gt; इनपुट सीएसएस:
<पूर्व> ul {ऊंचाई: 125px; चौड़ाई: 60%; मार्जिन: 0 ऑटो; } Li {list-style-type: none; बाईंओर तैरना; पैडिंग: 20px 20px; मार्जिन: 31 पीएक्स 0; -वेबकिट-बॉक्स-आकार: सीमा-बॉक्स; / * एंड्रॉइड ≤ 2.3, आईओएस ≤ 4 * / -मोज़-बॉक्स-आकार: सीमा-बॉक्स; / * फ़ायरफ़ॉक्स ≤ 28 * / बॉक्स आकार: सीमा-बक्सा; / * क्रोम, फ़ायरफ़ॉक्स 29+, आईई 8+, ओपेरा, सफारी 5.1 * /} अब मुझे li की चौड़ाई चाहिए: nth-last-child (2) < / कोड> अन्य तत्वों की चौड़ाई पर निर्भर करते हैं उदाहरण के तौर पर, उदाहरण के तौर पर 1000px चौड़ाई, पहले, दूसरे और अंतिम लि साथ एक साथ 300px विचित्र होती है, तो मैं चाहता हूं कि मेरे nth-last-child (2) चौड़ाई 700px हो।
तो मूल रूप से मुझे अपना li: nth-last-child (2) होना चाहिए 60% - (अन्य ली की चौड़ाई)
संपादित करें :
चौड़ाई: calc (60% - 700px); एक संभावना है, लेकिन मैं कैसे अन्य सभी li की चौड़ाई पता करूँ?
जेएस संभव भी है
यह सीएसएस में किया जा सकता है:
<पूर्व> उल {ऊंचाई: 125px; चौड़ाई: 60%; मार्जिन: 0 ऑटो; प्रदर्शन: तालिका; } ली {प्रदर्शन: टेबल-सेल; सूची-शैली-प्रकार: कोई नहीं; पैडिंग: 20px 20px; मार्जिन: 31 पीएक्स 0; -वेबकिट-बॉक्स-आकार: सीमा-बॉक्स; / * एंड्रॉइड ≤ 2.3, आईओएस ≤ 4 * / -मोज़-बॉक्स-आकार: सीमा-बॉक्स; / * फ़ायरफ़ॉक्स ≤ 28 * / बॉक्स आकार: सीमा-बक्सा; / * क्रोम, फ़ायरफ़ॉक्स 29+, आईई 8+, ओपेरा, सफारी 5.1 * / li: nth-last-child (2) {चौड़ाई: 100%; } अंतिम बिट महत्वपूर्ण हिस्सा है। यह संभव के रूप में अधिक स्थान लेने के लिए 3 आइटम को बताता है।
Comments
Post a Comment