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

Html – How can I use css grid and subgrid layout correctly for lists?

How can li contain other children such as strong, without them breaking the layout?

ol {
    counter-reset: Nr;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column: subgrid;



    li {
        counter-increment: Nr;
    grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        margin-top: var(--listsep);

        &::before {
            content: counter(Nr) ".";
            text-align: end;
            margin-right: 0.85rem;
        }

        ol {
            counter-reset: lit;

            li {
                counter-increment: lit;

                &::before {
                    content: counter(lit, lower-latin)')';
                }
            }
        }
    }
}
<ol>
  <li>This <strong>text</strong> is an example.</li>
  <li>This is ok.</li>
    <li>Nesting should still be possible
        <ol>
            <li>This is nested</li>
        </ol>
    </li>
</ol>
Tags:

2

Answers


  1. 0

    You may filter anything that is not an ol, ul or li via the pseudo-class :not() and remove them virtually.

    https://developer.mozilla.org/en-US/docs/Web/CSS/:not

    The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

    ol {
  counter-reset: Nr;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column: subgrid;
  li {
    counter-increment: Nr;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    margin-top: var(--listsep);
    &::before {
      content: counter(Nr) ".";
      text-align: end;
      margin-right: 0.85rem;
    }
    ol {
      counter-reset: lit;
      li {
        counter-increment: lit;
        &::before {
          content: counter(lit, lower-latin)')';
        }
      }
    }
  }
  *:not(ol, ul, li) {
    display: contents;
  }
}
    <ol>
  <li>This <strong>text</strong> is an example.</li>
  <li>This is ok.</li>
  <li>Nesting should still be possible
    <ol>
      <li>This is nested</li>
    </ol>
  </li>
</ol>
    Login or Signup to reply.
  2. 0

    Wrap it. or set display:inline

    ol {
    counter-reset: Nr;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column: subgrid;

    li {
        counter-increment: Nr;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        margin-top: var(--listsep);

        &::before {
            content: counter(Nr) ".";
            text-align: end;
            margin-right: 0.85rem;
        }
        ol {
            counter-reset: lit;

            li {
                counter-increment: lit;

                &::before {
                    content: counter(lit, lower-latin)')';
                }
            }
        }
    }
}
    <ol>
  <li><span>This <strong>text</strong> is an example.</span></li>
  <li><p style="margin-block:0">This <strong>text</strong> is an example.</p></li>
  <li><div>This <strong>text</strong> is an example.</div></li>
  <li style="display:inline">This <strong style="display:inline">text</strong> is an example.</li>
  <li>This is ok.</li>
    <li>Nesting should still be possible
        <ol>
            <li>This is nested</li>
        </ol>
    </li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search