सही कोष्ठक के साथ आदेशित सूची (HTML) लोअर-अल्फ़ा?

Question 1

ऑर्डर की गई सूची के लिए डिफ़ॉल्ट लोअर-अल्फा सूची प्रकार एक डॉट '।' का उपयोग करता है। वहाँ एक) की तरह एक सही कोष्ठक का उपयोग करने के लिए एक तरीका है ... बी) .. आदि?

Question 2

यहाँ एक साफ समाधान है। (ईमानदारी से मैंने खुद को इससे आश्चर्यचकित किया।) CSS में कुछ काउंटर हैं , जहां आप सेट कर सकते हैं, उदाहरण के लिए, प्रत्येक शीर्ष पर स्वचालित अध्याय संख्या। थोड़ा सा संशोधन आपको नीचे देता है; आपको स्वयं आदि को पैडिंग करने की आवश्यकता होगी।

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

स्निपेट का विस्तार करें

सभी आधुनिक ब्राउज़रों और IE9 + (और संभवतः IE8 लेकिन छोटी गाड़ी हो सकती है) में काम करता है।

अद्यतन: मैंने माता-पिता शैली को चुनने वाली नेस्टेड सूचियों को रोकने के लिए बाल चयनकर्ता को जोड़ा। trejder भी टिप्पणी में एक अच्छा बिंदु बनाता है कि सूची आइटम संरेखण भी गड़बड़ है। 456bereastreet पर एक लेख में एक अच्छा समाधान है जिसमें काउंटर को बिल्कुल स्थिति देना शामिल है।

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

स्निपेट का विस्तार करें

यहां एक jsFiddle परिणाम दिखा रहा है, जिसमें नेस्टेड सूचियां शामिल हैं।

Question 3

DisgruntledGoat के जवाब से दूर, मैंने इसे उप सूचियों और शैलियों का समर्थन करने के लिए विस्तारित किया, जैसा कि मुझे ज़रूरत थी। इसे यहाँ साझा करने से यह किसी को मदद करता है।

https://jsfiddle.net/0a8992b9/ आउटपुट:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

Question 4

इसे सीएसएस में जोड़ने से कुछ दिलचस्प परिणाम मिले। यह करीब था, लेकिन कोई सिगार नहीं था।

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- टिप्पणी में, Iazel से समाधान शामिल करने का संपादन -----

मैंने आपका समाधान पूरा कर दिया है:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

पृष्ठभूमि और position: absoluteचाल किया!

Question 5

यह IE7, FF3.6, ओपेरा 9.64 और क्रोम 6.0.4 में मेरे लिए काम करता है:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

यह इनलाइन है क्योंकि यह एक ईमेल के लिए कोडित है, लेकिन मुख्य बिंदु यह है कि स्पैन एक कंटेंट ब्लॉक के रूप में कार्य करता है और पैरेन को नकारात्मक बाएं क्षेत्र में खींचता है, इसलिए यह सूची नंबरों के साथ लाइन में आता है। दो मार्जिन IE7 और FF के अंतर की भरपाई करने के लिए हैं

उम्मीद है की यह मदद करेगा।