CODEWITHSUNDEEP
htmlcsslistings
Jennos
Jennos

Reputation: 11

formatting content of a list item

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.

Upvotes: 0

Views: 388

Answers (5)

Bhuwan
Bhuwan

Reputation: 16855

You can try the nested listing structure to get your result like below

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

Upvotes: 0

Jared Scarito
Jared Scarito

Reputation: 99

Change your CSS to this:

ul#ingredients li { display: block; }

This will make it so the elements of the list are on seperate lines and not next to each other. I believe that's what you wanted to do right?

Upvotes: 0

Siraj Alam
Siraj Alam

Reputation: 10035

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>

Upvotes: 3

SaidbakR
SaidbakR

Reputation: 13544

You could use mix of ol and ul and add control to padding of ul to adjust the separating distance between sub items and their parent ordered list item.

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

Upvotes: 0

freginold
freginold

Reputation: 3956

You can use a "list inside a list" format, like this:

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

Upvotes: 0

Related Questions