आप आदेशित सूची में संख्याओं को कैसे अनुकूलित कर सकते हैं?

मैं आदेशित सूची में संख्याओं को कैसे बाधित कर सकता हूं?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

आदेशित सूची में संख्या के बाद चरित्र बदलें?

1) an item

ओएल तत्व पर प्रकार विशेषता का उपयोग करने के बजाय संख्याओं से वर्णमाला/रोमन सूचियों में बदलने के लिए एक सीएसएस समाधान भी है।

मैं ज्यादातर उत्तर में दिलचस्पी लेता हूं जो फ़ायरफ़ॉक्स 3 पर काम करता है।

0
ro fr bn

15 उत्तर

विशेषता विशेषता है जो आपको नंबरिंग शैली बदलने की अनुमति देता है, हालांकि, आप इसे बदल नहीं सकते संख्या/पत्र के बाद पूर्ण रोकें।

  1. Turn left on Maple Street
  2. Turn right on Clover Court


0
जोड़ा
अमान्य एचटीएमएल पोस्ट करने के लिए मेरी माफ़ी। मैंने एक वेबसाइट से कोड कॉपी किया और इसे सही करने के लिए नहीं सोचा था। मुझे अब शर्म आती है :(
जोड़ा लेखक GateKiller, स्रोत
@dylanfm? आप जानते हैं कि प्रस्तुत मार्कअप उचित है, 100% मान्य एचटीएमएल, हाँ? जब तक एक्सएचटीएमएल का अनुरोध नहीं किया जाता है तब तक एक्सएचटीएमएल का उपयोग न करने के लिए लोगों को कम मत करें।
जोड़ा लेखक Ben Blank, स्रोत
मैंने तुम्हें कम नहीं किया। और हाँ, यह सच है। एचटीएमएल। मैं सिर्फ एक मानक चुनौतीपूर्ण व्यक्ति था।
जोड़ा लेखक dylanfm, स्रोत
और अपने तत्व बंद करें:
  • ...
  • जोड़ा लेखक dylanfm, स्रोत
    इस उत्तर में मार्कअप को ठीक करने की जरूरत है। लोअरकेस का प्रयोग करें और "उद्धरण" में विशेषता मान संलग्न करें।
    जोड़ा लेखक dylanfm, स्रोत

    यह वह समाधान है जिसे मैंने फ़ायरफ़ॉक्स 3, ओपेरा और Google क्रोम में काम किया है। सूची अभी भी आईई 7 में प्रदर्शित होती है (लेकिन बंद ब्रैकेट और बाएं संरेखण संख्याओं के बिना):

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    ol {
      counter-reset: item;
      margin-left: 0;
      padding-left: 0;
    }
    li {
      display: block;
      margin-bottom: .5em;
      margin-left: 2em;
    }
    li::before {
      display: inline-block;
      content: counter(item) ") ";
      counter-increment: item;
      width: 2em;
      margin-left: -2em;
    }
    
    
    1. One
    2. Two
    3. Three
    4. Four
    5. Five
    6. Six
    7. Seven
    8. Eight
    9. Nine
      Items
    10. Ten
      Items
    </div> </div>

    EDIT: Included multiple line fix by strager

    ओएल तत्व पर प्रकार विशेषता का उपयोग करने के बजाय संख्याओं से वर्णमाला/रोमन सूचियों में बदलने के लिए एक सीएसएस समाधान भी है।

    सूची-शैली-प्रकार सीएसएस संपत्ति का संदर्भ लें। या काउंटर का उपयोग करते समय दूसरा तर्क एक सूची-शैली-प्रकार मान स्वीकार करता है। उदाहरण के लिए निम्नलिखित ऊपरी रोमन का उपयोग करेंगे:

    li::before {
      content: counter(item, upper-roman) ") ";
      counter-increment: item;
    /* ... */
    
    0
    जोड़ा
    लाइव डेमो jsfiddle.net/yzz6uaaL
    जोड़ा लेखक Adrien Be, स्रोत
    मैं एक क्लीनर सीएसएस मार्जिन/पैडिंग समाधान का सुझाव देता हूं, जो विस्तृत संख्या वाले सूचियों के साथ बेहतर काम करता है: ol {counter-reset: item; पैडिंग-बाएं: 0;} ली {डिस्प्ले: ब्लॉक; मार्जिन-तल: .5em;} li: {डिस्प्ले: इनलाइन-ब्लॉक से पहले; सामग्री: काउंटर (आइटम) ")"; प्रतिद्वंद्विता: वस्तु; पैडिंग-दाएं: 0.8em;}
    जोड़ा लेखक mmj, स्रोत
    संख्याओं को वापस जोड़ने की आवश्यकता है, एक वैश्विक शैली उन्हें हटा रही थी (कौन जानता है कि आप एक ओल का उपयोग क्यों करेंगे और उल के बजाय संख्याओं को हटा देंगे ??)। पूर्ण स्पष्टीकरण और कोड के लिए बहुत स्पष्ट उत्तर +1, आसानी से कुछ भी करने के लिए संशोधित किया जा सकता है।
    जोड़ा लेखक Morvael, स्रोत

    इसे अन्य उत्तरों से चुरा लिया, लेकिन यह मेरे लिए एफएफ 3 में काम कर रहा है। इसमें ऊपरी-रोमन , वर्दी इंडेंटिंग, एक करीबी ब्रैकेट है।

    
    
    <head>
    <title> new document </title>
    
    </head>
    
    <body>
    
    1. One
    2. Two
    3. Three
    4. Four
    5. Five
    6. Six
    7. Seven
    8. Eight
    9. Nine
    10. Ten
    </body>
    </html>
    
    0
    जोड़ा

    उधार और सुधार हुआ मार्कस डाउनिंग का उत्तर । फ़ायरफ़ॉक्स 3 और ओपेरा 9 में परीक्षण और काम करता है। कई लाइनों का भी समर्थन करता है।

    ol {
        counter-reset: item;
        margin-left: 0;
        padding-left: 0;
    }
    
    li {
        display: block;
        margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
    }
    
    li:before {
        content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
        counter-increment: item;
        display: inline-block;
        text-align: right;
        width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
        padding-right: 0.5em;
        margin-left: -3.5em;         /* See li comments. */
    }
    
    0
    जोड़ा
    @strager, ठीक है, मैं विंडोज़ पर 3.0.4 और विंडोज़ पर 3.0.3 का उपयोग कर रहा हूं, और यह मेरे बिना फ्लोट के काम करता है: बाएं; राज करते हैं।
    जोड़ा लेखक grom, स्रोत
    इसके अलावा आप टेक्स्ट-एलाइन चाहते हैं: बाएं; सही नहीं। और अंतिम पंक्ति मार्जिन-बाएं होनी चाहिए: -3.5em;
    जोड़ा लेखक grom, स्रोत
    फ़ायरफ़ॉक्स क्या मुद्दा है?
    जोड़ा लेखक grom, स्रोत
    @grom, हम्म, दिलचस्प। मैंने अभी परीक्षण किया है, और यह फ्लोट के बिना काम करता है। शायद मैं गलत टाइप किया।
    जोड़ा लेखक strager, स्रोत
    @grom, फ़ायरफ़ॉक्स समस्या है ... फ़ायरफ़ॉक्स ली डालता है: छत के बिना अपनी लाइन पर स्यूडोलेमेंट से पहले, भले ही यह प्रदर्शित हो: इनलाइन-ब्लॉक।
    जोड़ा लेखक strager, स्रोत
    @grom, एम सुधार के लिए धन्यवाद। इसके अलावा, ओपेरा प्रस्तुत करता है डिफ़ॉल्ट रूप से सही ढंग से गठबंधन करता है, इसलिए मैंने इस व्यवहार की नकल की।
    जोड़ा लेखक strager, स्रोत

    नहीं ... बस एक डीएल का उपयोग करें:

    dl { overflow:hidden; }
    dt {
     float:left;
     clear: left;
     width:4em; /* adjust the width; make sure the total of both is 100% */
     text-align: right
    }
    dd {
     float:left;
     width:50%; /* adjust the width; make sure the total of both is 100% */
     margin: 0 0.5em;
    }
    
    0
    जोड़ा

    सूची-शैली-प्रकार से:

    ol { list-style-type: decimal-leading-zero; }
    
    0
    जोड़ा

    स्टाइल सूची के लिए सीएसएस यहां है, लेकिन मूल रूप से:

    li {
        list-style-type: decimal;
        list-style-position: inside;
    }
    

    हालांकि, आपके द्वारा किए जाने वाले विशिष्ट लेआउट को केवल यह (ध्यान दें कि मैंने वास्तव में इसे आजमाया नहीं है):

    ol { counter-reset: item }
    li { display: block }
    li:before { content: counter(item) ") "; counter-increment: item }
    
    0
    जोड़ा
    यह संख्याओं को रेखांकित करता है, लेकिन पाठ सामग्री नहीं है।
    जोड़ा लेखक grom, स्रोत

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

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

    li:before {
      content: counter(item) ") ";
      counter-increment: item;
      display: marker;
      width: 2em;
    }
    

    लेकिन आपको सटीक समाधान खोजने के लिए प्रयोग करना होगा।

    0
    जोड़ा
    आपको काउंटर-रीसेट की आवश्यकता होगी: आइटम; उस ब्लॉक से पहले।
    जोड़ा लेखक Greg, स्रोत

    मेरे पास है। निम्नलिखित आज़माएं:

    <html>
    <head>
    
    </head>
    <body>
    
    1. Something
    2. Something
    3. Something
    4. Something
    5. Something
    6. Something
    7. Something
    8. Something
    9. Something
    10. Something
    11. Something
    12. Something
    </body>
    

    पकड़ यह है कि यह निश्चित रूप से पुराने या कम अनुपालन वाले ब्राउज़र पर काम नहीं करेगा: प्रदर्शन: इनलाइन-ब्लॉक एक बहुत ही नई संपत्ति है।

    0
    जोड़ा

    मुझे लगता है कि यह एक ऐसा उत्तर है जो आपकी आवश्यकताओं को पूरा करता है:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    li { 
      list-style-position: inside;
      margin-bottom: .5em;
    }
    li span {
      float: left;
      margin-left: 2em;
      margin-top: -1.25em;
    }
    
    
    1. Item
    2. Item
    3. Item
    4. Item
    </div> </div>

    0
    जोड़ा
    हाँ यह काम करता है। अगर केवल स्पैन जोड़ने के लिए नहीं था। लेकिन अब तक यह सबसे अच्छा जवाब है।
    जोड़ा लेखक grom, स्रोत
    आप एलआईएस पर मूल्य-विशेषता का भी उपयोग कर सकते हैं। यदि आप किसी आइटम का मान किसी नंबर पर सेट करते हैं, तो अगले लोग वहां से जारी रहेंगे।
    जोड़ा लेखक Arve Systad, स्रोत
    हाँ अतिरिक्त मार्कअप लंगड़ा मुझे पता है।
    जोड़ा लेखक willoller, स्रोत
    अद्यतन: एचटीएमएल 5 में भी बहिष्कृत नहीं है, तो आप जो भी पसंद करते हैं :)
    जोड़ा लेखक willoller, स्रोत
    @ आर्वे हाँ यह भी अच्छा है - दोनों विकल्प xhtml में बहिष्कृत हैं, और अभी तक कोई अच्छा एक्स-ब्राउज़र सीएसएस समाधान नहीं है। इस पर पढ़ें: webmasterworld.com/css/3119510.htm और w3.org/TR/CSS2/generate.html#counters
    जोड़ा लेखक willoller, स्रोत

    The docs say regarding list-style-position: outside

    सीएसएस 1 ने मार्कर बॉक्स के सटीक स्थान और संगतता के कारणों के लिए निर्दिष्ट नहीं किया है, सीएसएस 2 समान रूप से अस्पष्ट है। मार्कर बक्से के अधिक सटीक नियंत्रण के लिए, कृपया मार्कर का उपयोग करें।

    आगे यह पृष्ठ मार्करों के बारे में सामान है।

    एक उदाहरण है:

           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
    
    0
    जोड़ा
    सभी उदाहरण ( w3.org/TR/CSS2/generate.html#q11 देखें ) मार्करों के लिए मेरे लिए काम नहीं करते हैं।
    जोड़ा लेखक grom, स्रोत

    Quick and dirt alternative solution. You can use a tabulation character along with preformatted text. Here's a possibility:

    
    

    और आपका एचटीएमएल:

    1. an item
    2. another item
    3. ...
    
    

    ध्यान दें कि li टैग और टेक्स्ट की भिखारी के बीच की जगह एक सारणीकरण वर्ण है (जब आप नोटपैड के अंदर टैब कुंजी दबाते हैं तो आपको क्या मिलता है)।

    यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है, तो आप इसके बजाय ऐसा कर सकते हैं:

    
    
    1.    
      an item
    2.    
      another item
    3. ...
    
    
    
    0
    जोड़ा

    The other answers are better from a conceptual point of view. However, you can just left-pad the numbers with the appropriate number of ' ' to make them line up.

    * Note: I did not at first recognize that a numbered list was being used. I thought the list was being explicitly generated.

    0
    जोड़ा

    मैं यहां ऐसे उत्तर का उत्तर दूंगा जो मैं आमतौर पर पढ़ना पसंद नहीं करता हूं, लेकिन मुझे लगता है कि जैसा कि अन्य उत्तर हैं जो आपको बताते हैं कि आप जो चाहते हैं उसे प्राप्त करने के लिए, अगर आप जो कोशिश कर रहे हैं वह वास्तव में पुनर्विचार करना अच्छा हो सकता है एक अच्छा विचार।

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

    मैं इसके कारणों को नहीं जानता, लेकिन मान लीजिए कि आपके अच्छे कारण हैं।

    आपके मार्कअप में सामग्री जोड़ने में शामिल होने वाले तरीकों से प्राप्त करने के तरीके, मुख्य रूप से सीएसएस को छूते हैं: स्यूडोक्लस से पहले। यह सामग्री वास्तव में आपके डीओएम संरचना को संशोधित कर रही है, जो उन वस्तुओं को जोड़ रही है।

    जब आप मानक "ओएल" अंक का उपयोग करते हैं, तो आपके पास एक प्रस्तुत सामग्री होगी जिसमें "ली" टेक्स्ट चयन योग्य होगा, लेकिन इससे पहले की संख्या चयन योग्य नहीं है। यही है, मानक संख्या प्रणाली वास्तविक सामग्री की तुलना में अधिक "सजावट" प्रतीत होती है। यदि आप उदाहरण के लिए "पहले:" विधियों का उपयोग करके संख्याओं के लिए सामग्री जोड़ते हैं, तो यह सामग्री चयन योग्य होगी, और इसके लिए डांटा जाएगा, अवांछित vopy/पेस्ट समस्याएं, या स्क्रीन पाठकों के साथ एक्सेसिबिलिटी समस्याएं जो इस "नई" सामग्री को पढ़ने के साथ पढ़ेगी मानक संख्या प्रणाली के लिए।

    शायद एक और दृष्टिकोण छवियों का उपयोग कर संख्याओं को स्टाइल करने के लिए हो सकता है, हालांकि यह विकल्प अपनी समस्याएं लाएगा (छवियां अक्षम होने पर संख्याएं दिखाई नहीं दे रही हैं, संख्या के लिए टेक्स्ट आकार बदल नहीं रहा है ...)।

    वैसे भी, इस उत्तर का कारण सिर्फ "छवियों" विकल्प का प्रस्ताव नहीं देना है, बल्कि लोगों को आदेशित सूचियों के लिए मानक संख्या प्रणाली को बदलने की कोशिश करने के परिणामों में विचार करना है।

    0
    जोड़ा

    आप एचटीएमएल में अपनी संख्या भी निर्दिष्ट कर सकते हैं - उदा। यदि डेटाबेस द्वारा संख्याएं प्रदान की जा रही हैं:

    1. Item one
    2. Item twenty
    3. Item three hundred
    
    

    seq विशेषता अन्य उत्तरों में दी गई विधि के समान दिखाई दे रही है। लेकिन content: counter (foo) का उपयोग करने के बजाय, हम content: attr (seq) का उपयोग करते हैं:

    ol {
      list-style: none;
    }
    
    ol > li:before {
      content: attr(seq) ". ";
    }
    

    अधिक स्टाइल के साथ CodePen में डेमो

    0
    जोड़ा
    @GWB हालांकि यह वैध है (और एक अच्छा समाधान), यह संख्यात्मक मानों तक सीमित है क्योंकि सूची क्रमिक है। इस प्रकार, आप value = "4A" जैसे कुछ नहीं कर सकते हैं, क्योंकि यह काम नहीं करेगा। इसके अतिरिक्त, मान विशेषता प्रकार विशेषता के साथ काम कर सकती है, लेकिन मान अभी भी एक संख्या होना चाहिए (क्योंकि यह एक आदेशित सेट के भीतर काम करता है)।
    जोड़ा लेखक jedd.ahyoung, स्रोत
    यदि आप
  • पर value विशेषता का उपयोग करते हैं तो आप इसे सरल बना सकते हैं। जैसे
    • । तब आपको किसी छद्म तत्व की आवश्यकता नहीं है। डेमो
  • जोड़ा लेखक GWB, स्रोत