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

Question

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

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

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

जोड़ा 14 अगस्त 2008 पर 02:42 लेखक grom संपादित 09 जून 2011 पर 02:27

विचारों: 9

स्रोत

15 उत्तर

लेखक GateKiller · Answer 1 · 2008-08-14T03:03Z

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


    Turn left on Maple Street
    Turn right on Clover Court

0

जोड़ा 14 अगस्त 2008 पर 03:03 लेखक GateKiller

स्रोत

अमान्य एचटीएमएल पोस्ट करने के लिए मेरी माफ़ी। मैंने एक वेबसाइट से कोड कॉपी किया और इसे सही करने के लिए नहीं सोचा था। मुझे अब शर्म आती है :(

जोड़ा 28 जनवरी 2009 पर 01:55, लेखक GateKiller, स्रोत

@dylanfm? आप जानते हैं कि प्रस्तुत मार्कअप उचित है, 100% मान्य एचटीएमएल, हाँ? जब तक एक्सएचटीएमएल का अनुरोध नहीं किया जाता है तब तक एक्सएचटीएमएल का उपयोग न करने के लिए लोगों को कम मत करें।

जोड़ा 28 जनवरी 2009 पर 03:00, लेखक Ben Blank, स्रोत

मैंने तुम्हें कम नहीं किया। और हाँ, यह सच है। एचटीएमएल। मैं सिर्फ एक मानक चुनौतीपूर्ण व्यक्ति था।

जोड़ा 28 जनवरी 2009 पर 01:04, लेखक dylanfm, स्रोत

और अपने तत्व बंद करें:

...

।

जोड़ा 28 जनवरी 2009 पर 01:46, लेखक dylanfm, स्रोत

इस उत्तर में मार्कअप को ठीक करने की जरूरत है। लोअरकेस का प्रयोग करें और "उद्धरण" में विशेषता मान संलग्न करें।

जोड़ा 28 जनवरी 2009 पर 01:46, लेखक dylanfm, स्रोत

लेखक grom · Answer 2 · 2009-01-28T09:31Z

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

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;
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven
  Eight
  Nine
Items
  Ten
Items

</div> </div>

EDIT: Included multiple line fix by strager

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

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

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

लेखक Steve Perks · Answer 3 · 2009-01-28T06:54Z

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



<head>
<title> new document </title>

</head>

<body>

  One
  Two
  Three
  Four
  Five
  Six
  Seven
  Eight
  Nine
  Ten

</body>
</html>

लेखक strager · Answer 4 · 2009-01-28T11:01Z

उधार और सुधार हुआ मार्कस डाउनिंग का उत्तर । फ़ायरफ़ॉक्स 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. */
}

लेखक Full Decent · Answer 5 · 2011-11-23T03:45Z

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

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;
}

लेखक Peter Hilton · Answer 6 · 2008-08-24T02:30Z

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

ol { list-style-type: decimal-leading-zero; }

लेखक Marcus Downing · Answer 7 · 2008-08-14T03:01Z

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

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

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

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

लेखक Marcus Downing · Answer 8 · 2008-08-18T06:51Z

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

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

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

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

लेखक Marcus Downing · Answer 9 · 2009-01-28T05:49Z

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

<html>
<head>

</head>
<body>

    Something
    Something
    Something
    Something
    Something
    Something
    Something
    Something
    Something
    Something
    Something
    Something

</body>

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

लेखक willoller · Answer 10 · 2009-01-28T07:54Z

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

li { 
  list-style-position: inside;
  margin-bottom: .5em;
}
li span {
  float: left;
  margin-left: 2em;
  margin-top: -1.25em;
}


  Item
  Item
  Item
  Item

</div> </div>

0

जोड़ा 28 जनवरी 2009 पर 07:54 लेखक willoller

स्रोत

हाँ यह काम करता है। अगर केवल स्पैन जोड़ने के लिए नहीं था। लेकिन अब तक यह सबसे अच्छा जवाब है।

जोड़ा 28 जनवरी 2009 पर 08:56, लेखक grom, स्रोत

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

जोड़ा 30 जनवरी 2009 पर 03:33, लेखक Arve Systad, स्रोत

हाँ अतिरिक्त मार्कअप लंगड़ा मुझे पता है।

जोड़ा 28 जनवरी 2009 पर 06:47, लेखक willoller, स्रोत

अद्यतन: एचटीएमएल 5 में भी बहिष्कृत नहीं है, तो आप जो भी पसंद करते हैं :)

जोड़ा 01 अक्टूबर 2011 पर 04:05, लेखक willoller, स्रोत

@ आर्वे हाँ यह भी अच्छा है - दोनों विकल्प xhtml में बहिष्कृत हैं, और अभी तक कोई अच्छा एक्स-ब्राउज़र सीएसएस समाधान नहीं है। इस पर पढ़ें: webmasterworld.com/css/3119510.htm और w3.org/TR/CSS2/generate.html#counters

जोड़ा 30 जनवरी 2009 पर 09:31, लेखक willoller, स्रोत

लेखक Stephen Denne · Answer 11 · 2009-01-28T09:53Z

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;
       }

लेखक Marco Luglio · Answer 12 · 2009-02-01T08:02Z

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

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


    an item
    another item
...

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

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




       
an item
       
another item
    ...

लेखक Metro · Answer 13 · 2011-11-28T06:44Z

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.

लेखक tomasofen · Answer 14 · 2014-02-08T09:10Z

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

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

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

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

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

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

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

लेखक z0r · Answer 15 · 2015-08-05T07:53Z

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


  Item one
  Item twenty
  Item three hundred

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

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

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