flexbox के साथ सूची की सूची-अनुक्रमणिका को लंबवत रूप से कैसे संरेखित करें?

मुझे कस्टम सूची-अनुक्रमणिका के साथ एक सूची बनाने की आवश्यकता है जो सूची आइटमों की सामग्री पर लंबवत केंद्रित है।flexbox के साथ सूची की सूची-अनुक्रमणिका को लंबवत रूप से कैसे संरेखित करें?

जैसा कि मैं पहले से ही फ्लेक्स का उपयोग कर रहा हूं, मैंने सोचा कि सूची आइटम को display:flex; देना और इसे स्टाइल करना सबसे आसान हो सकता है। यह काम करता है, लेकिन जैसे ही सूची-आइटम में अन्य तत्व होते हैं, यह को गड़बड़ कर देता है। जैसा कि आप नीचे दिए गए उदाहरण में देख सकते हैं।

सूची-अनुक्रमणिका को लंबवत रूप से केन्द्रित करने का सबसे अच्छा तरीका क्या है?

- Updated उदाहरण -

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 

 
ol > li { 
 
    display: flex; 
 
    margin-top: 20px; 
 
    align-items: center; 
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 
    flex display: block; 
 
    flex-shrink: 0; 
 
    text-align: right; 
 
    min-width: 24px; 
 
    padding-right: 5px; 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

स्रोत

2016-12-29 Stefan Kunze

खैर ... कैसे सीएसएस रास्ते पर बड़ा नहीं-नहीं, अच्छा ol 'तालिकाओं के बारे में? :) https://jsfiddle.net/vLk5Lxs4/ – sinisake

@sinisake क्यों बड़ा नहीं-नहीं? मुझे लगता है कि यह एक अच्छा समाधान है – Oriol

@ ओरीओल, धन्यवाद, लेकिन, चूंकि सवाल फ्लेक्स के बारे में है ... मैंने अभी उस सुझाव को एक सुझाव के रूप में छोड़ दिया है ...;) – sinisake

समाधान इस विशेष मामले में फ्लेक्स के बजाय, display:table उपयोग करने के लिए, हो सकता है।

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
    display:table; 
 
    border-spacing:0 20px; 
 
} 
 

 
ol > li { 
 
    display:table-row; 
 
    vertical-align:middle;  
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    text-align: right; 
 
    white-space: nowrap; 
 
    padding-right: 10px; 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

स्रोत

2016-12-29 20:12:03 sinisake

मुझे लगता है कि मैं उस समाधान के साथ जाऊंगा - क्योंकि मुझे मौजूदा मार्कअप में ऐड रैपर जोड़ने की ज़रूरत नहीं है। –

यहाँ पूर्ण स्थिति तीर लंबवत रूप से केंद्रित रखने के लिए के साथ एक विधि है।

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 

 
ol > li { 
 
    margin: 20px 0 0; 
 
    padding-left: 36px; 
 
    position: relative; 
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 

 
    font-size: 14px; 
 
    line-height: 1; 
 
    
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; /* vertically center */ 
 
    margin-top: -7px; /* and shift up based on 16px height */ 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

स्रोत

2016-12-29 15:37:55

है या नहीं, इस दौरान मैंने इसे ठीक से कैसे ठीक किया है। लेकिन यह एक नई समस्या खुलता है जहां मुझे सूची-सूचकांक की चौड़ाई को जानने की आवश्यकता होती है क्योंकि इसे सूची-वस्तु के मार्जिन द्वारा परिभाषित किया जाता है। –

@StefanKunze यह एक नई समस्या कैसी है? मैं उसी '30px' चौड़ाई का उपयोग कर रहा हूं जिसे आपने गटर के लिए अपने उदाहरण में निर्दिष्ट किया था। –

@StefanKunze मैंने थोड़ा संपादन किया ताकि '30px' केवल एक ही स्थान पर आवश्यक हो। 'पहले' ('आपके सीएसएस में) पर' चौड़ाई 'के बजाय, अब यह 'li' पर पैडिंग है। –

मुझे लगता है कि सबसे अच्छा विकल्प एक अन्य तत्व में li अंदर सभी तत्वों को रैप करने के लिए है और वह इस समस्या को ठीक करना चाहिए।

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 
ul > li { 
 
    display: flex; 
 
    margin-top: 20px; 
 
    align-items: center; 
 
} 
 
ul > li:before { 
 
    color: red; 
 
    content: '›'; 
 
    flex display: block; 
 
    flex-shrink: 0; 
 
    text-align: center; 
 
    width: 30px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li> 
 
    <p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p> 
 
    </li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ul>

स्रोत

2016-12-29 15:38:19

उस आइडिया के लिए धन्यवाद - उम्मीद है कि एक अतिरिक्त रैपर की आवश्यकता के बिना एक समाधान है। –

flexbox के साथ सूची की सूची-अनुक्रमणिका को लंबवत रूप से कैसे संरेखित करें?

उत्तर

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