CSS के माध्यम से आदेशित सूचियों में दूसरी पंक्ति के लिए इंडेंट कैसे रखें?

Question

मैं सूची बुलेट या दशमलव संख्याओं के साथ एक "अंदर" सूची रखना चाहता हूं जो सभी श्रेष्ठ पाठ ब्लॉक के साथ फ्लश हो। सूची प्रविष्टियों की दूसरी पंक्तियों में पहली पंक्ति की तरह एक ही इंडेंट होना चाहिए!

उदाहरण के लिए:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. 

CSS अपनी "सूची-शैली-स्थिति" के लिए केवल दो मूल्य प्रदान करता है - अंदर और बाहर। "अंदर" के साथ दूसरी पंक्तियाँ सूची बिंदु के साथ फ्लश होती हैं जो बेहतर रेखा के साथ नहीं होती हैं:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

चौड़ाई "बाहर" मेरी सूची अब बेहतर पाठ ब्लॉक के साथ फ्लश नहीं है।

प्रयोग की गई चौड़ाई पाठ-इंडेंट, पेडिंग-लेफ्ट और मार्जिन-लेफ्ट के लिए अनऑर्डर की गई सूचियों के लिए काम करती है, लेकिन वे ऑर्डर की गई सूचियों के लिए असफल हो जाती हैं क्योंकि यह सूची-दशमलव के वर्णों की संख्या पर निर्भर करती है:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"1 1।" और "12." "3." की तुलना में बेहतर टेक्स्ट ब्लॉक के साथ फ्लश नहीं है और "4."।

तो जहां सूचियों और दूसरी पंक्ति-इंडेंट के बारे में रहस्य है? आपके प्रयास के लिए धन्यवाद!

Comments

उपयोगकर्ता पाली मदरा ने इसे एक उत्तर के रूप में जोड़ा, लेकिन इसे और अधिक बहिष्करण के लिए हटा दिया गया। उन्होंने कहा कि jsfield वह हो सकता है जिसे आप ढूंढ रहे हैं: jsfiddle.net/palimadra/CZuXY/1

— bfavaretto

केवल पेडिंग-लेफ्ट सेट करने का प्रयास करें ...

— matzone

यदि कोई व्यक्ति इस प्रश्न पर लड़खड़ाता है, जो सिर्फ "मूल सूची इंडिकेशन" की तलाश में है, तो इस प्रश्न पर एक नज़र डालें ( stackoverflow.com/questions/17556496/… ) और नताशा बानेगास उत्तर।

— सनीरेड

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

— जेस्सी वेस्टलेक

Answer 1

अपडेट करें

यह उत्तर पुराना है। आप इसे और अधिक सरलता से कर सकते हैं, जैसा कि नीचे एक अन्य उत्तर में दिया गया है:

ul {
  list-style-position: outside;
}

Https://www.w3schools.com/cssref/pr_list-style-position.asp देखें

मूल उत्तर

मुझे यह देखकर आश्चर्य हुआ कि यह अभी तक हल नहीं हुआ है। आप ब्राउज़र की टेबल लेआउट एल्गोरिथ्म का उपयोग कर सकते हैं (टेबल का उपयोग किए बिना) इस तरह:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

डेमो: http://jsfiddle.net/4rnNK/1/

IE8 में इसे काम करने के लिए, :beforeएक बृहदान्त्र के साथ विरासत संकेतन का उपयोग करें ।

Comments

@Perelli fooसिर्फ एक मनमाना स्ट्रिंग (आईडी) है, यह कनेक्ट करने के लिए प्रयोग किया जाता है counter-reset, counter-incrementऔर counter()गुण।

— user123444555621

तुम भी उपयोग कर wonky तालिका सामान से बच सकते हैं position: relativeपर <li>और position: absoluteजनरेट की गई सामग्री पर। उदाहरण के लिए jsfiddle.net/maryisdead/kgr4k देखें ।

— मैरीसिडेड

@maryisdead क्यों 40px? वह तब टूटेगा जब काउंटर उससे ज्यादा चौड़े होंगे । तालिका लेआउट का उपयोग करने का पूरा बिंदु यह है कि ब्राउज़र सामग्री को स्वचालित रूप से फिट करेगा।

— user123444555621

अच्छा है, लेकिन आप <li> निचला मार्जिन कैसे नियंत्रित करते हैं? <Li> की ऊंचाई पूरी तरह से तालिका-सेल तत्वों की ऊंचाई से निर्धारित होती है। इस प्रकार, उन तत्वों पर मार्जिन, पैडिंग और ऊंचाई का कोई प्रभाव नहीं है। इस सीमा के आसपास कैसे काम करें?

— hschmieder 9

यदि आपके पास कई-पंक्ति सूची आइटम हैं, और लगातार ऊर्ध्वाधर रिक्ति की आवश्यकता है, तो समाधान ऑल सिलेक्टर में वर्टिकल बॉर्डर-स्पेसिंग को जोड़ना है, जैसे बॉर्डर-स्पेसिंग: 0 3px; टेबल-सेल पर सामान्य पैडिंग काम नहीं करता है क्योंकि संख्या हमेशा केवल एक पंक्ति होती है।

— रेम्बे नोव

Answer 2

मुझे विश्वास है कि यह वही करेगा जो आप ढूंढ रहे हैं।

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

Comments

बेहतर है अगर आप पैडिंग-लेफ्ट भी जोड़ते हैं: 1em;

— बेंस गकासली

यह अब तक इस पृष्ठ के सभी समाधानों का सबसे अच्छा उत्तर है। यह दूसरों की तुलना में बहुत अधिक सुविधाजनक है। यदि आप यह चुनने में संकोच कर रहे हैं कि कौन सा उत्तर चुनना है, तो इसे चुनें।

— वैलेंटाइन मर्सीर

@loremmonkey यह त्वरित और गंदा है लेकिन वास्तविक समाधान नहीं है। सबसे पहले, 1emइंडेंट के स्थान के बराबर नहीं है। लाइनें पूरी तरह पिक्सेल-वार संरेखित नहीं होंगी। दूसरा, जब सूची 10 नंबर पर पहुंचती है तो क्या होगा? 100? पाठ-इंडेंट काम नहीं करेगा, यह गठबंधन नहीं किया जाएगा। इस जवाब को डाउन-वोट किया जाना चाहिए।

— सनी

@ सुन्नी यह एक डिस्क सूची है जो एक नंबर वाली नहीं है, तो 100 तक क्यों गिना जाए? मुझे उपरोक्त कोड का उपयोग करके मेरी सूचियों में कोई समस्या नहीं है।

— लोरेम बंदर

@loremmonkey इंडेंट नहीं है 1em। oi60.tinypic.com/a0eyvs.jpg पहली सूची-आइटम ऊपर पाठ-इंडेंट तकनीक का उपयोग कर रही है। सामान्य रूप से यह सूची-शैली-स्थिति के साथ कैसा दिखता है, इसकी तुलना में: इस मामले में पिक्सेल द्वारा इसे गलत बताया गया है।

— सनी

Answer 3

सबसे आसान और साफ तरीका, बिना किसी हैक के, बस इंडेंट ul(या ol) करना है, जैसे:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

यह स्वीकृत उत्तर के समान परिणाम देता है: https://jsfiddle.net/5wxf2ayu/

स्क्रीनशॉट:

Comments

आपको आवेदन list-style-position: outsideकरने की आवश्यकता हो सकती है <li>।

— एलेक्स

@ एलेक्स आपको केवल यह करने की आवश्यकता है यदि आप किसी मौजूदा शैली ( डेवलपर . mozilla.org/en/docs/Web/CSS/list-style-position) को ओवरराइट कर रहे हैं ।

— चक ले बट

Answer 4

इस फिडेल की जाँच करें:

http://jsfiddle.net/K6bLp/

यह दिखाता है कि CSS का उपयोग करके मैन्युअल रूप से ul और ol को इंडेंट कैसे करें।

एचटीएमएल

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

सीएसएस

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

इसके अलावा मैंने आपकी फिडेल को संपादित किया है

http://jsfiddle.net/j7MEd/3/

इसका नोट बना लें।

Comments

धन्यवाद, यह उल के लिए और ओएल के लिए 9 सूची प्रविष्टियों के लिए बहुत अच्छा काम करता है। यह मुख्य समस्या है जिसे मैंने अपने प्रश्न की चौड़ाई 11/12-में वर्णित किया है। ऊपर मेरे उदाहरण में, मैं एक अन्य तकनीक चलाता हूं, इसलिए समस्या अलग दिखती है, लेकिन समस्या का मूल एक ही रहता है: मेरे दशमलव-सूची-बिंदु में एक या दो या अधिक अंक होने पर अंतर होता है - जैसे 1., 11. या 111.! मुझे कोई बिंदु नहीं दिखता है जहां मैं सीएसएस के माध्यम से प्रतिक्रिया करने में सक्षम हूं और पाठ-इंडेंट और मार्जिन-संख्या को संख्याओं के लिए समायोजित कर सकता हूं।

— kernfrucht

Ol की दूसरी पंक्ति इंडेंट (एक अंक से अधिक) के लिए, मुझे लगता है कि CSS इसे हल नहीं करेगा। हमें केवल जाच के लिए जाना चाहिए।

— दीपन बाबू

यह भी ध्यान दें कि HTML 5 में उपयोग के typeलिए विशेषता <ol>दिखाई देती है style="list-style-type: "।

— ए जे।

क्या आप में से 21 लोग भी गंभीर हैं? यह काम नहीं करता। यकीन नहीं होता कि आपने पोस्ट करने के बाद अपना कोड बदला है।

— जीलार्डो

Answer 5

आप सीएसएस में olया तो मार्जिन या पैडिंग सेट कर सकते हैंul

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

Comments

दुर्भाग्य से समस्या इस समाधान से हल नहीं होती है: दूसरी पंक्तियाँ सूची के साथ फ्लश कर रही हैं, बेहतर पंक्ति को चौड़ाई नहीं, ऊपर उदाहरण देखें

— kernfrucht

11 और 12 में jsfiddle.net/j7MEd/1 ऊपर और नीचे पैराग्राफ के साथ लाइन अप करें और मैंने कोड नहीं बदला। क्या मैं कुछ भूल रहा हूँ?

— luke2012

नहीं, यह बात नहीं है। मुख्य समस्या यह है कि प्रत्येक सूची बिंदु की दूसरी (और तीसरी, आदि ...) पहली पंक्ति की तरह समान "इंडेंट" नहीं है! (देखें jsfiddle-example)। ऊपर दिए गए मेरे प्रश्न में, मैं पैडिंग, मार्जिन आदि के साथ वर्कअराउंड के बारे में सोचता हूं, लेकिन यह केवल UNordered सूचियों के लिए काम करता है। आदेशित सूची में 11/12 जैसी नई समस्याएँ आती हैं। तो मेरा मुख्य प्रश्न है: मैं 11/12 चीज़ जैसी समस्याओं के बिना ऑर्डर की गई सूचियों के लिए किया गया इंडेंट-चीज़ (जैसे मैं अपने यूरेनियन के पहले उदाहरण में प्रस्तुत करता हूं) कैसे प्राप्त कर सकता हूं।

— kernfrucht

ओके सॉरी मिल गया! यह एक तरीका है .. केवल समस्या क्रॉस-ब्राउज़र को प्राप्त करना है जिसे आपको IE में मार्जिन और फ़ायरफ़ॉक्स में पैडिंग सेट करने की आवश्यकता होगी। jsfiddle.net/j7MEd/2

— luke2012

Answer 6

मेरा मानना ​​है कि आपको बस सूची 'बुलेट' को पैडिंग के बाहर रखना होगा।

li {
    list-style-position: outside;
    padding-left: 1em;
}

Answer 7

आप एक सीमा का चयन करने के लिए सीएसएस का उपयोग कर सकते हैं; इस मामले में, आप सूची आइटम 1-9 चाहते हैं:

ol li:nth-child(n+1):nth-child(-n+9) 

फिर उचित रूप से उन पहली वस्तुओं पर मार्जिन समायोजित करें:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

इसे यहां देखें: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

Answer 8

निम्नलिखित सीएसएस ने चाल चली:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}

Answer 9

मेरी समाधान के रूप में काफी एक ही है Pumbaa80 के एक है, लेकिन मैं का उपयोग करने का सुझाव देते हैं display: tableबजाय display:table-rowके लिए liतत्व। तो यह कुछ इस तरह होगा:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

तो अब हम दोनों के बीच के अंतर के लिए मार्जिन का उपयोग कर सकते liहै

Answer 10

मैं खुद इस समाधान के लिए बहुत शौकीन हूं:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}

Comments

केवल समस्या फ़ॉन्ट आकार

— atilkan

Answer 11

यदि आप चाहते हैं कि ऑल, उल सूचियां काम करेंगी तो आप सीमा के साथ एक तालिका का उपयोग कर सकते हैं: सीएसएस में कोई भी नहीं।

Comments

मुझे लगता है कि अर्थ-संबंधी नियमों के विषय में यह एक अच्छा समाधान नहीं है

— kernfrucht

Answer 12

CSS अपनी "सूची-शैली-स्थिति" के लिए केवल दो मूल्य प्रदान करता है - अंदर और बाहर। "अंदर" के साथ दूसरी पंक्तियाँ सूची बिंदु के साथ फ्लश होती हैं जो बेहतर रेखा के साथ नहीं होती हैं:

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

यदि आप इसके बजाय "सूची-शैली-स्थिति" मूल्य "बाहर" देते हैं, तो दूसरी पंक्ति में पहली पंक्ति के समान इंडेंट होगा।

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

मैंने इसे पूरी सूची के लिए बस एक व्यापक बाएं हाशिया सेट करके हल किया, जिसने पूरी सूची को दाईं ओर धकेल दिया, पहले की स्थिति में वापस।

सीएसएस:

ol.classname {मार्जिन: 0; गद्दी: 0 ;;

ol.classname li {मार्जिन: 0.5em 0 0 0; गद्दी-बाएं: 0; सूची-शैली-स्थिति: बाहर;};

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

Answer 13

ठीक है, मैं वापस चला गया और कुछ चीजों का पता लगा लिया। यह एक प्रस्ताव है जो मैं प्रस्ताव कर रहा था, लेकिन यह कार्यात्मक प्रतीत होता है।

सबसे पहले, मैंने संख्याओं को अनियोजित सूचियों की एक श्रृंखला बना दिया। एक अनियंत्रित सूची में सामान्यतः प्रत्येक सूची आइटम की शुरुआत में एक डिस्क होगी (

) तो आपको सीएसएस को सूची-शैली पर सेट करना होगा: कोई नहीं;

फिर, मैंने पूरी सूची प्रदर्शित की: तालिका-पंक्ति। यहाँ, मैं आपको सिर्फ इसके बारे में जुगाड़ करने के बजाय कोड पेस्ट क्यों नहीं करता?

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

सीएसएस:

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

यह पहले डिव में क्रमबद्ध सूची में संख्याओं के साथ 2 डी डिव में पाठ को संरेखित करता है। मैंने एक टैग के साथ सूची और पाठ दोनों को घेर लिया है ताकि मैं सभी इनलाइनों को इनलाइन-ब्लॉक के रूप में प्रदर्शित कर सकूं। यह उन्हें अच्छी तरह से तैयार है।

मार्जिन पाठ की अवधि और शुरुआत के बीच एक स्थान रखने के लिए है। अन्यथा, वे एक-दूसरे के खिलाफ सही दौड़ते हैं और यह एक आंख की तरह दिखता है।

मेरे नियोक्ता को पहली पंक्ति की शुरुआत के साथ पंक्तिबद्ध पाठ (लंबे समय तक ग्रंथ सूची प्रविष्टियों के लिए) की आवश्यकता थी, बाएं हाथ के मार्जिन से नहीं। मूल रूप से मैं एक सकारात्मक मार्जिन और एक नकारात्मक पाठ इंडेंट के साथ फिट हो रहा था, लेकिन तब मुझे एहसास हुआ कि जब मैं दो अलग-अलग विभाजनों में बदल गया था, तो इसे बनाने का प्रभाव था ताकि पाठ सभी पंक्तिबद्ध हो जाए क्योंकि div के बाएं हाथ का मार्जिन वह मार्जिन था जहां पाठ स्वाभाविक रूप से शुरू हुआ था। इस प्रकार, मुझे जो कुछ भी चाहिए था, वह था कुछ स्थान जोड़ने के लिए ०.२ मी मार्जिन, और बाकी सब कुछ तैरता हुआ।

मुझे आशा है कि यह मदद करता है अगर ओपी एक समान मुद्दा था ... मुझे उसे समझने में एक कठिन समय था।

Answer 14

मेरे पास यही मुद्दा था और user123444555621 के उत्तर का उपयोग करना शुरू कर दिया । हालाँकि, मुझे भी जोड़ने की जरूरत थीpaddingborder प्रत्येक और एक करने कीli , जो कि समाधान की अनुमति नहीं देता क्योंकि प्रत्येक liएक है table-row।

सबसे पहले, हम संख्याओं counterको दोहराने के लिए उपयोग करते हैं ol।

हम फिर display: table;प्रत्येक पर सेट करते हैंli और हमें इंडेंटेशन देने display: table-cellके :beforeलिए ।

अंत में, मुश्किल हिस्सा। चूँकि हम पूरे के लिए एक टेबल लेआउट का उपयोग नहीं कर रहे हैं इसलिए हमें olयह सुनिश्चित करने की आवश्यकता है कि प्रत्येक :beforeसमान चौड़ाई है। हम chइकाई का उपयोग मोटे तौर पर वर्णों की संख्या के बराबर चौड़ाई रखने के लिए कर सकते हैं । चौड़ाई के समान रखने के लिए जब अंकों की संख्या :beforeभिन्न होती है, तो हम मात्रा प्रश्नों को लागू कर सकते हैं । यदि आप जानते हैं कि आपकी सूची 100 आइटम या अधिक नहीं होगी, तो आपको :beforeइसकी चौड़ाई बदलने के लिए बताने के लिए केवल एक मात्रा क्वेरी नियम की आवश्यकता होगी , लेकिन आप आसानी से अधिक जोड़ सकते हैं।

ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>