नई लाइन

Question

पर पहले और आखिरी इनलाइन-ब्लॉक तत्व के लिए चयनकर्ता मैं गतिशील तत्वों के साथ एक नेविगेशन बनाने की कोशिश कर रहा हूं जो छोटे स्क्रीन आकारों पर दो पंक्तियों को तोड़ सकता है, और मैं शैली को शैली में सक्षम होना चाहता हूं प्रत्येक पंक्ति पर पहले और अंतिम तत्व।

<ul> 
    <li>First page</li> 
    <li>Second page</li> 
    <li>Third page</li> 
    <li>Fourth page</li> 
    <li>Another example page</li> 
    <li>This could be the last page</li> 
    <li>But its not</li> 
    <li>This is actually the last page</li> 
</ul> 

ul { 
    list-style:none; 
    font-size:0px; 
    li { 
     font-size:18px; 
     display:inline-block; 
     padding:10px 30px; 
     border:1px solid black; 
     margin:10px -1px 10px 0; 
     &:first-child { 
      border-top-left-radius:5px; 
      border-bottom-left-radius:5px; 
     } 
     &:last-child { 
      border-top-right-radius:5px; 
      border-bottom-right-radius:5px; 
     } 
    }   
} 

प्रासंगिक के साथ jsfiddle: http://jsfiddle.net/tbw4f23g/1/

है

Heres कुछ उदाहरण एससीएसएस कि छोटे स्क्रीन आकार में टूट जाता है (गोलाकार कोनों प्रत्येक पंक्ति पर पहली और आखिरी तत्व पर होना चाहिए) पहले और आखिरी इनलाइन-ब्लॉक तत्व के लिए चयनकर्ता प्राप्त करना संभव है जो एक नई लाइन पर चलता है या इस प्रभाव के लिए कोई अन्य (गैर-जावास्क्रिप्ट) दृष्टिकोण है?

Answer 1

कोई सीएसएस-केवल तरीका नहीं है। मैंने the JavaScript solution in your fiddle जोड़ा है।

कामकाज के रूप में, आप आइटम सूची में निश्चित प्रतिशत चौड़ाई निर्दिष्ट कर सकते हैं, और स्क्रीन आकार के आधार पर चौड़ाई बढ़ाने/घटाने के लिए सीएसएस मीडिया प्रश्नों का उपयोग कर सकते हैं। इस तरह से आप जान लेंगे कि एक पंक्ति पर कितनी चीजें फिट हैं जो बदले में आपको विशिष्ट तत्वों की शैली बनाने की अनुमति देती है। एसएएसएस लेखन दोहराव सीएसएस आसान बना सकता है। किसी न किसी रूपरेखा (खुला पूरे पृष्ठ और ब्राउज़र का आकार परिवर्तन):

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    margin-bottom: .5em; 
 
    border: thin solid #EEE; 
 
    padding: 1em; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    background-color: #CEF; 
 
} 
 
li:first-child { 
 
    border-top-left-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
} 
 
li:last-child { 
 
    border-top-right-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
} 
 
@media (min-width: 600px) and (max-width: 799px) { 
 
    /* 4 items per row */ 
 
    li { 
 
    width: 25%; 
 
    } 
 
    /* match 4, 8, 12, ...*/ 
 
    li:nth-child(4n+4) { 
 
    border-top-right-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
    } 
 
    /* match 5, 9, 13, ... */ 
 
    li:nth-child(4n+5) { 
 
    border-top-left-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
    } 
 
} 
 
@media (max-width: 599px) { 
 
    /* 3 items per row */ 
 
    li { 
 
    width: 33.3333%; 
 
    } 
 
    /* match 3, 6, 9, ... */ 
 
    li:nth-child(3n+3) { 
 
    border-top-right-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
    } 
 
    /* match 4, 7, 10, ... */ 
 
    li:nth-child(3n+4) { 
 
    border-top-left-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
    } 
 
}

<ul> 
 
    <li>Praesent ultricies libero</li> 
 
    <li>Aenean in velit vel</li> 
 
    <li>Ut consequat odio</li> 
 
    <li>Integer convallis sapien</li> 
 
    <li>Fusce placerat augue</li> 
 
    <li>Vestibulum finibus nunc</li> 
 
    <li>Nulla consectetur mi</li> 
 
    <li>Ut sollicitudin metus</li> 
 
    <li>Maecenas quis nisl sit</li> 
 
    <li>Vivamus eleifend justo</li> 
 
    <li>Duis ut libero pharetra</li> 
 
</ul>

Answer 2

क्या पहले और आखिरी इनलाइन-ब्लॉक तत्व के लिए चयनकर्ता प्राप्त करना संभव है जो एक नई लाइन पर चलता है या इस प्रभाव के लिए कोई अन्य (गैर-जावास्क्रिप्ट) दृष्टिकोण है?

नहीं, ऐसे कोई चयनकर्ता नहीं हैं। सीएसएस लाइनों को तोड़ने के बारे में जानकारी तक पहुंच प्रदान नहीं करता है (:first-line छद्म-तत्व के सीमित अपवाद के साथ)। नहीं, इस प्रभाव के लिए कोई अन्य गैर-जावास्क्रिप्ट दृष्टिकोण नहीं हैं।

यदि आप जेएस का उपयोग करने के इच्छुक हैं, तो जब भी लेआउट बदल सकता है, तो आप तत्वों को फिर से चालू कर सकते हैं, प्रत्येक पैर की स्थिति की जांच अपने माता-पिता के कंटेनर के साथ करें, यह तय करें कि यह बाएं या दाएं तरफ है, फिर अपनी सीमा त्रिज्या लागू करें।

एक और संभावित जेएस समाधान चौड़ाई जमा करके और ब्रेक होने वाला यह पता लगाने के द्वारा अपनी लाइन-ब्रेकिंग गणना करने के लिए है।

आप चिनाई जैसे पुस्तकालयों की जांच करना चाह सकते हैं यह देखने के लिए कि क्या वे आंतरिक लेआउट कॉन्फ़िगरेशन तक पहुंचने की अनुमति देने वाले हुक प्रदान करते हैं, जो इसे आसान बना सकता है।