Html Question posted in
Some basic documentation can be found here.

Html – Have ol inside a li without having li being shown

I would like to have the following layout:

1. some data
2. some data
3. some data
   i. another data
   ii. another data

I use the following html:

<ol type="a">
Data
<li>some data</li>
<li>some data</li>
<li>some data:</li>
<ol type="i">
    <li>another data</li>
    <li>
        other data,
    </li>
</ol>

However, it gives a warning ol can’t be inside li. If I add another li I get following output:

<ol type="a">
Data
<li>some data</li>
<li>some data</li>
<li>some data:</li>
<li>
<ol type="i">
    <li>another data</li>
    <li>
        other data,
    </li>
</ol>
</li>
</ol>


1. some data
2. some data
3. some data
4. 
   i. another data
   ii. another data

How to avoid the warning and still achieve the result. Thanks.

Tags:

2

Answers


  1. 0

    You should put your ol in the same li you want your list to be nested in. Here is an example:

    <ol type="a">
    <li>some data</li>
    <li>some data</li>
    <li>some data:
        <ol type="i">
            <li>another data</li>
            <li>other data,</li>
        </ol>
    </li>
</ol>
    Login or Signup to reply.
  2. 0 
    <ol type="a">
  <li>some data</li>
  <li>some data</li>
  <li>
    <div>some data:</div>
    <ol type="i">
      <li>another data</li>
      <li>other data</li>
    </ol>
  </li>
</ol>

    We can use the following CSS to style the list items:

    ol {
  list-style-type: none;
}

ol[type="a"] li {
  counter-increment: list-a;
}

ol[type="a"] li::before {
  content: counter(list-a) ". ";
}

ol[type="a"] li > div {
  display: inline-block;
  margin-right: 5px;
}

ol[type="i"] li {
  counter-increment: list-i;
}

ol[type="i"] li::before {
  content: "(" counter(list-i) ") ";
}

    This way, have a clean structure, and the CSS styling takes care of the numbering and formatting.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search