formatting content of a list item

Question

Alright, so I am beginner, and I am trying to format some list items in a certain way. Here is an example of how I want to list things.

I tried a few ways to do this. My first attempt :

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

<ul 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>
</ul>

but I found the formating wasn't quite right. Then I tried this:

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

But obvious the texts displays horizontally.

I tried using a grid display, which worked, but I needed to change the size of the column manually and I would like something that adjustes automatically.

I thought about using javaScript to place an array within the content of each list item, but I couldn't really get that to work either...

Any advice on how to get this formated the way I want it.

Answer 1

From my understandings, you're trying to make nested lists. First one is an ordered and inside one is an unordered list.

I think this is what you're looking for.

ul {
    list-style-type: none;
    padding-bottom: 10px;
}

<ol>
  <li>
    <ul>
      <li>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 eggs (separated)</li>
      <li> 2 oz. of melted butter</li>
      <li>3. 1 ½ cup of water</li>
    </ul>
  </li>
  <li>
     <ul>
       <li>Next sub-list item</li>
       <li>Next sub-list item</li>
       <li>Next sub-list item</li>
     </ul>
  </li>
</ol>