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

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 पर काम करने वाले उत्तरों में दिलचस्पी रखता हूँ।

Answer 1

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

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

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

संपादित करें: स्ट्रेजर द्वारा कई लाइन फिक्स शामिल हैं

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

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

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

Comments

नंबरों को वापस जोड़ने की आवश्यकता थी, एक वैश्विक शैली उन्हें हटा रही थी (जो जानता है कि आप एक ओएल का उपयोग क्यों करेंगे और एक उल ?? के बजाय संख्याओं को हटा देंगे?)। पूर्ण स्पष्टीकरण और कोड के लिए बहुत स्पष्ट उत्तर +1 आसानी से कुछ भी करने के लिए संशोधित किया जा सकता है।

— मोरवेल

मेरा सुझाव है कि एक सीएसएस मार्जिन मार्जिन / पेडिंग समाधान, जो विस्तृत संख्या वाले सूचियों के साथ बेहतर काम करता है ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}:।

— mmj

Answer 2

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

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

हालांकि, विशिष्ट लेआउट आप के बाद कर रहे हैं शायद ही की तरह कुछ के साथ लेआउट के धर्मशाला में delving द्वारा प्राप्त किया जा सकता यह (ध्यान दें कि मैं वास्तव में यह प्रयास नहीं किया है):

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

Comments

यह संख्याओं को पंक्तिबद्ध करता है, लेकिन पाठ सामग्री नहीं है।

— ग्रोम

Answer 3

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

ol {
  list-style: none;
}

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

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

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

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

Comments

आप इसे सरल कर सकते हैं यदि आप केवल valueविशेषता का उपयोग करते हैं <li>। उदा <li value="20">। फिर आपको किसी छद्म तत्वों की आवश्यकता नहीं है। डेमो

— GWB

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

— jedd.ahyoung

धन्यवाद - यह मेरे लिए तब काम आया जब मुझे फ्लाइंग तश्तरी को रिवर्स ऑर्डर में एक सूची दिखाने के लिए आवश्यक था ( reversedविशेषता html5 केवल है, जैसा valueकि li) का उपयोग कर रहा है । इसके बजाय का उपयोग करने के अपने seqमैं एक सेट valueऔर इस्तेमाल attr(value)के बजायattr(seq)

— jaygooby

Answer 4

अन्य उत्तरों में से बहुत कुछ चुरा लिया, लेकिन यह मेरे लिए FF3 में काम कर रहा है। इसमें upper-romanसमान इंडेंटिंग, एक करीबी ब्रैकेट है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

Answer 5

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

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

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

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

Comments

आपको एक काउंटर-रीसेट की आवश्यकता होगी: आइटम; उस ब्लॉक से पहले।

— ग्रेग

Answer 6

यदि आप सूची-शैली-प्रकार सेट करके संख्याओं में अग्रणी-शून्य जोड़ते हैं, तो संख्याएँ बेहतर ढंग से पंक्तिबद्ध होती हैं:

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

Answer 7

HTML5: valueविशेषता का उपयोग करें (कोई CSS आवश्यक नहीं)

आधुनिक ब्राउज़र valueविशेषता की व्याख्या करेंगे और जैसा कि आप उम्मीद करेंगे, उसे प्रदर्शित करेंगे। MDN प्रलेखन देखें ।

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

इसके अलावा पर एक नजर है MDN पर लेख , विशेष रूप से के लिए दस्तावेज़ और विशेषता।<ol>start

Answer 8

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

Comments

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

— grom

@ ग्रोम, उन्हें सुधार के लिए धन्यवाद। साथ ही, ओपेरा रेंडरर्स डिफ़ॉल्ट रूप से दाएं-संरेखित सूची को सूचीबद्ध करता है, इसलिए मैंने इस व्यवहार की नकल की।

— स्ट्रैजर

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

— स्ट्रैजर

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

— ग्रोम

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

— strager

Answer 9

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

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

Comments

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

— dylanfm

और अपने तत्वों को बंद करें: <li> ... </ li>।

— dylanfm

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

— बेन ब्लैंक

मैंने आपको निराश नहीं किया। और हां, यह सच है। एचटीएमएल। मैं सिर्फ एक मानक थका हुआ व्यक्ति था।

— dylanfm

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

— गेटकीलर

Answer 10

डॉक्स के बारे में कहते हैं list-style-position: outside

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

इसके अलावा उस पृष्ठ पर मार्करों के बारे में सामान है।

एक उदाहरण है:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

Comments

मार्करों के लिए सभी उदाहरण ( w3.org/TR/CSS2/generate.html#q11 देखें ) मेरे लिए काम नहीं करते हैं।

— ग्रोम

Answer 11

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

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

Answer 12

मेरे पास है। निम्नलिखित प्रयास करें:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

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

Answer 13

त्वरित और गंदगी वैकल्पिक समाधान। आप पूर्वनिर्मित पाठ के साथ-साथ सारणीयन चरित्र का उपयोग कर सकते हैं। यहाँ एक संभावना है:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

और आपका HTML:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

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

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

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

Answer 14

अन्य उत्तर वैचारिक दृष्टिकोण से बेहतर हैं। हालाँकि, आप केवल '& ensp;' की संख्या के साथ संख्याओं को छोड़ सकते हैं। उन्हें लाइन अप करने के लिए।

* नोट: मैंने पहली बार यह नहीं पहचाना कि एक क्रमांकित सूची का उपयोग किया जा रहा था। मुझे लगा कि सूची स्पष्ट रूप से उत्पन्न की जा रही है।

Answer 15

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

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

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

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

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

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

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

Answer 16

यह कोड नंबर शैली को ली सामग्री के शीर्षकों के समान बनाता है।

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>