CODEWITHSUNDEEP
htmlcss
Simon Of All Trades
Simon Of All Trades

Reputation: 11

How to changed indenting of Items in list

I am trying to make an ordered list with headings between items, e.g.:

However, I want Heading 2 to be flush with Heading 1. This was the code used (the ul tags are necessary due to the style guide I have to follow). 

<ul>
Heading 1
  <ol>
    <li>item 1</li>
    <li>item 2</li>
Heading 2
    <li>item 3</li>
   <li>item 4</li>
  </ol>

</ul>

I can only use html, so any advice would be great

Upvotes: 1

Views: 37

Answers (2)

Ken Kinder
Ken Kinder

Reputation: 13120

You need to use a listitem (li tag) then, include additional lists within each tag. For example:

<ul>
  <li>
    Heading 1
    <ol>
      <li>item 1</li>
      <li>item 2</li>
    </ol>
  </li>
  <li>
    Heading 2
    <ol>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </li>
</ul>

That way you have one unordered list, two list items in it, then ordered list as embedded lists.

Or, if you want to have the numbers from each sublist use the same counter, per your comment, you would create a CSS counter:

body {
    counter-reset: my-sub-list;
}

ol {
    list-style-type: none;
}

ol li::before {
    counter-increment: my-sub-list;
    content: "" counter(my-sub-list) ". ";
}
    <ul>
      <li>
        Heading 1
        <ol>
          <li>item 1</li>
          <li>item 2</li>
        </ol>
      </li>
      <li>
        Heading 2
        <ol>
          <li>item 3</li>
          <li>item 4</li>
        </ol>
      </li>
    </ul>

What I've done here is created a counter, my-sub-list, and told CSS to use it in each ol list item.

Upvotes: 0

Itay Gal
Itay Gal

Reputation: 10834

Use two lists and set start number of the second list to 3

Heading 1
<ol>
  <li>item 1</li>
  <li>item 2</li>
</ol>
Heading 2
<ol start="3">
  <li>item 3</li>
  <li>item 4</li>
</ol>

Upvotes: 2

Related Questions