किसी सूची आइटम की स्वरूपण सामग्री

आप "सूची के अंदर सूची" प्रारूप का उपयोग इस तरह कर सकते हैं:

#ingredients li {
  list-style-type: none;
}

ol {
  padding-bottom: 1em;
}

<ol>
  <li>
    <ol id="ingredients">
      <li>1. 8 oz. Gram flour</li>
      <li>1 tsp baking powder</li>
      <li>1 tsp curry powder</li>
      <li>½ tsp salt</li>
      <li>2. 2 eggs (separated)</li>
      <li>2 oz. of melted butter</li>
      <li>3. 1 ½ cup of water</li>
    </ol>
  </li>
  <li>
    <ol>(Step 2)</ol>
  </li>
</ol>

आप ol और ul के मिश्रण का उपयोग कर सकते हैं और ul की पैडिंग पर नियंत्रण जोड़ सकते हैं ताकि उप-आइटम और उनके माता-पिता द्वारा ऑर्डर की गई सूची आइटम के बीच की दूरी को समायोजित किया जा सके।

एचटीएमएल:

<ol>
  <li>
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li>
      <li>Item 1.3</li>
      <li>Item 1.4</li>
    </ul>
  </li>  
  <li>
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
      <li>Item 2.4</li>
      <li>Item 2.5</li>
    </ul>
  </li>  
</ol>

सीएसएस:

ol li ul{
      padding-left: 7px; /* The distance between list number and item */
    }
    ol li ul li{
      list-style: none;      
    }

डेमो

इसमें अपना सीएसएस बदलें:

ul#ingredients li { display: block; }

यह ऐसा कर देगा ताकि सूची के तत्व अलग-अलग लाइनों पर हों और एक दूसरे के बगल में न हों। मुझे विश्वास है कि आप यही करना चाहते थे, है ना?

आप अपना परिणाम नीचे की तरह प्राप्त करने के लिए नेस्टेड लिस्टिंग संरचना का प्रयास कर सकते हैं

#ingredients {
  margin: 0;
  padding-left: 20px;
}

#ingredients>li {
  padding-left: 20px;
}

#ingredients>li>ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;
}

<ol id="ingredients">
  <li>
    <ul>
      <li>1. 8 oz. Gram flour</li>
      <li>1 tsp baking powder</li>
      <li>1 tsp curry powder</li>
      <li>½ tsp salt</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>2. 2 eggs (separated)</li>
      <li>2 oz. of melted butter</li>
      <li>3. 1 ½ cup of water</li>
    </ul>
  </li>
</ol>