एचटीएमएल सूची पर नंबर कैसे स्टाइल करें?

Question

क्या आदेश दिया गया सूची पर केवल के आकार को स्टाइल या बढ़ाने के लिए संभव है?

मैं ऑर्डर सूची ol को केवल सीएसएस का उपयोग करके wikihow चरणों जैसे कुछ में बदलने की योजना बना रहा हूं। .... शैली की http://jsfiddle.net/ejRzy/1/

Answer 1

यह CSS3 लेकिन% नहीं 100 पार ब्राउज़र (अर्थात् IE7) का उपयोग किया जा सकता है। छद्म का उपयोग करके: तत्व और काउंटर-रीसेट और काउंटर-वृद्धि से पहले आप सूची-शैली को छुपा सकते हैं और अपना स्वयं का बना सकते हैं। Styling ordered list numbers

और here एक डेमो है कि लेख से बनाया गया है:

यहाँ एक लेख रूपरेखा कैसे है।

खतरनाक लिंक रोट के मामले में

इसके अलावा - यहाँ मुख्य सीएसएस आवश्यक कोड (यह किसी भी आदेश दिया सूची में लागू किया जा सकता है)

ol { 
    counter-reset:li; /* Initiate a counter */ 
    margin-left:0; /* Remove the default left margin */ 
    padding-left:0; /* Remove the default left padding */ 
} 
ol > li { 
    position:relative; /* Create a positioning context */ 
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */ 
    padding:4px 8px; /* Add some spacing around the content */ 
    list-style:none; /* Disable the normal item numbering */ 
    border-top:2px solid #666; 
    background:#f6f6f6; 
} 
ol > li:before { 
    content:counter(li); /* Use the counter as content */ 
    counter-increment:li; /* Increment the counter by 1 */ 
    /* Position and style the number */ 
    position:absolute; 
    top:-2px; 
    left:-2em; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    width:2em; 
    /* Some space between the number and the content in browsers that support 
     generated content but not positioning it (Camino 2 is one example) */ 
    margin-right:8px; 
    padding:4px; 
    border-top:2px solid #666; 
    color:#fff; 
    background:#666; 
    font-weight:bold; 
    font-family:"Helvetica Neue", Arial, sans-serif; 
    text-align:center; 
} 
li ol, 
li ul {margin-top:6px;} 
ol ol li:last-child {margin-bottom:0;}​ 

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

Answer 2

तरह फ़ॉन्ट आकार आप संख्या के लिए चाहते हैं के साथ अपने आदेश दिया सूची है, तो फैला में आपके सभी सूची आइटम लपेटो, और उन्हें एक दे:

यहाँ साथ खेलने के लिए एक उदाहरण है भिन्न शैली।

http://jsfiddle.net/keith_nicholas/MEHXj/