格式化列表项的内容

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。

我想这就是你要找的。​​p>

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>

Answer 2

您可以使用“列表中的列表”格式，如下所示：

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

Answer 3

您可以混合使用ol 和ul 并添加控件到ul 的填充以调整子项与其父有序列表项之间的分隔距离。

HTML：

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

CSS：

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

DEMO

Answer 4

将您的 CSS 更改为：

ul#ingredients li { display: block; }

这将使列表的元素位于单独的行上，而不是彼此相邻。我相信这就是您想要做的，对吗？

Answer 5

您可以尝试嵌套列表结构以获得如下结果

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