html - 格式化列表项的内容

Question

好吧，我是初学者，我正在尝试以某种方式格式化一些列表项。 Here是我想如何列出事物的一个例子。

我尝试了几种方法来做到这一点。我的第一次尝试:

#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>

但我发现格式不太正确。然后我试了这个:

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

但很明显文本是水平显示的。

我尝试使用网格显示，效果很好，但我需要手动更改列的大小，我想要一些可以自动调整的内容。

我考虑过使用 javaScript 在每个列表项的内容中放置一个数组，但我也无法真正实现它...

关于如何按照我想要的方式格式化它的任何建议。

Answer 1

根据我的理解，您正在尝试制作嵌套列表。第一个是 ordered里面有一个 unordered list .

我想这就是您要找的。

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>