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

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 पर 05:42 लेखक grom संपादित 09 जून 2011 पर 05:27

विचारों: 7

स्रोत

ro fr bn

15 उत्तर

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

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

Turn left on Maple Street
Turn right on Clover Court

0

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

स्रोत

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

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

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

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

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

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

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

...

।

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

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

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

लेखक grom · Answer 2 · 2009-01-28T11: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-28T08: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-29T01: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. */
}

0

जोड़ा 29 जनवरी 2009 पर 01:01 लेखक strager

स्रोत

@strager, ठीक है, मैं विंडोज़ पर 3.0.4 और विंडोज़ पर 3.0.3 का उपयोग कर रहा हूं, और यह मेरे बिना फ्लोट के काम करता है: बाएं; राज करते हैं।

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

इसके अलावा आप टेक्स्ट-एलाइन चाहते हैं: बाएं; सही नहीं। और अंतिम पंक्ति मार्जिन-बाएं होनी चाहिए: -3.5em;

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

फ़ायरफ़ॉक्स क्या मुद्दा है?

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

@grom, हम्म, दिलचस्प। मैंने अभी परीक्षण किया है, और यह फ्लोट के बिना काम करता है। शायद मैं गलत टाइप किया।

जोड़ा 30 जनवरी 2009 पर 06:20, लेखक strager, स्रोत

@grom, फ़ायरफ़ॉक्स समस्या है ... फ़ायरफ़ॉक्स ली डालता है: छत के बिना अपनी लाइन पर स्यूडोलेमेंट से पहले, भले ही यह प्रदर्शित हो: इनलाइन-ब्लॉक।

जोड़ा 30 जनवरी 2009 पर 05:28, लेखक strager, स्रोत

@grom, एम सुधार के लिए धन्यवाद। इसके अलावा, ओपेरा प्रस्तुत करता है डिफ़ॉल्ट रूप से सही ढंग से गठबंधन करता है, इसलिए मैंने इस व्यवहार की नकल की।

जोड़ा 30 जनवरी 2009 पर 05:27, लेखक strager, स्रोत

लेखक Full Decent · Answer 5 · 2011-11-23T05: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-24T05:30Z

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

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

0

जोड़ा 24 अगस्त 2008 पर 05:30 लेखक Peter Hilton

स्रोत

लेखक Marcus Downing · Answer 7 · 2008-08-14T06: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-18T09:51Z

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

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

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

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

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

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

<html>
<head>

</head>
<body>

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

</body>

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

लेखक willoller · Answer 10 · 2009-01-28T09: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 पर 09:54 लेखक willoller

स्रोत

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

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

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

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

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

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

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

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

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

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

लेखक Stephen Denne · Answer 11 · 2009-01-28T11: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-01T10: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-28T08: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-08T11:10Z

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

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

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

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

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

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

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

लेखक z0r · Answer 15 · 2015-08-05T10: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 में डेमो

0

जोड़ा 05 अगस्त 2015 पर 10:53 लेखक z0r

स्रोत

@GWB हालांकि यह वैध है (और एक अच्छा समाधान), यह संख्यात्मक मानों तक सीमित है क्योंकि सूची क्रमिक है। इस प्रकार, आप

value =
"4A"

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

जोड़ा 07 नवंबर 2016 पर 08:34, लेखक jedd.ahyoung, स्रोत

यदि आप

पर value विशेषता का उपयोग करते हैं तो आप इसे सरल बना सकते हैं। जैसे

। तब आपको किसी छद्म तत्व की आवश्यकता नहीं है। डेमो

जोड़ा 19 जनवरी 2016 पर 02:38, लेखक GWB, स्रोत