格式化列表项的内容

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

将您的 CSS 更改为：

ul#ingredients li { display: block; }

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

Answer 2

根据我的理解，您正在尝试制作嵌套列表。第一个是 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>

Answer 3

您可以使用 "list inside a list" 格式，如下所示：

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

您可以混合使用 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 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>

格式化列表项的内容

formatting content of a list item

html

css

listings