एचटीएमएल: आदेशित सूची आइटम बिंदु डिस्प्ले कैसे बदलें?

Question

मेरे पास HTML दस्तावेज़ में <ol> टैग (आदेशित सूची) है। मैं इसे चाहते हैं निम्न स्वरूप में आइटम प्रदर्शित करने के लिए:

i. Item 1 
ii. Item 2 
iii. Item 3 

:

<ol type="i"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ol> 

यह मैं निम्नलिखित परिणाम देता है:

(i) Item 1 
(ii) Item 2 
(iii) Item 3 

वर्तमान में मैं यह निम्नलिखित HTML कोड के साथ काम किया है

क्या इस प्रश्न की शुरुआत में मैंने वांछित तरीके से अपनी सूची प्रदर्शित करना संभव है?

संपादित करें:जो भी स्वीकार किए जाते हैं जवाब का हिस्सा है सवाल अनुवर्ती

मैं लिपटे आइटम (आइटम है कि एक लाइन के लिए बहुत लंबे हैं) स्वचालित रूप से एक ही टैब लाइन पर नई लाइनें शुरू करने के लिए कैसे प्राप्त कर सकते हैं ?

Answer 1

केवल CSS3 का उपयोग करना, आप इसे इस रूप में कर सकते हैं:

ol { 
 
    counter-reset: increment_var; 
 
    list-style-type: none; 
 
} 
 
li:before { 
 
    display: inline-block; 
 
    content: "(" counter(increment_var, lower-roman) ") "; 
 
    counter-increment: increment_var; 
 
    width: 40px; 
 
    margin-left: -40px; 
 
} 
 
li { 
 
    margin-left: 40px; 
 
    }

<ol> 
 
    <li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li> 
 
    <li>Example 2</li> 
 
    <li>Example 3</li> 
 
    <li>Example 4</li> 
 
    <li>Example 5</li> 
 
</ol>