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>

Answer 2

将CSS更改为：

ul#ingredients li { display: block; }

这将使列表的元素在单独的行上而不是彼此相邻。我相信这就是你想做的事情吗？

Answer 3

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

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

 class Project(models.Model):
     name = models.CharField(max_length=50)

 class Manager(models.Model):
     name = models.CharField(max_length=50)
     role = models.CharField(max_length=20)
     projects = This would be array of Project object. But how can I 
                implement this?
     class Meta:
        unique_together = ('name', 'role')

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>

格式化列表项的内容

5 个答案: