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

Html – How to fix position of numbers in an ordered list with monospace font

I have a numbered list inside of a table with monospace font and numbers in numbered list are off to the left. It seems to happen only for monospace fonts. Is there a way to make it appear on the same level as bullets on bullet list?

Simplest repro:

ol {
  font-family: monospace;
}

ul,
ol {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0 0 0 1.4em;
  font-size: 15px;
  line-height: 24px;
  list-style: none;
}

ol {
  list-style-type: decimal;
}

ul {
  list-style: disc;
}

table {
  font-family: monospace;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  td {
    position: relative;
    min-width: 137px;
    padding: 7px 6px;
    border: 1px solid #ccc;
    line-height: 20px;
  }
}
<div contenteditable="true">
  <ol>
    <li>Hello</li>
    <li>World</li>
  </ol>

  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>

  <table>
    <tr>
      <td>
        <ol>
          <li>Hello</li>
          <li>World</li>
        </ol>

        <ul>
          <li>Hello</li>
          <li>World</li>
        </ul>
      </td>
      <td>Another cell</td>
    </tr>
  </table>
</div>

enter image description here

Tags:

2

Answers


  1. 0

    Try this:

    ol > li::marker {
  white-space: inherit;
}

    ul,
ol {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0 0 0 1.4em;
  font-size: 15px;
  line-height: 24px;
  list-style: none;
}

ol {
  list-style-type: decimal;
}

ol > li::marker {
  white-space: inherit;
}

ul {
  list-style-type: disc;
}

table {
  font-family: monospace;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  td {
    position: relative;
    min-width: 137px;
    padding: 7px 6px;
    border: 1px solid #ccc;
    line-height: 20px;
  }
}
    <div contenteditable="true">
  <table>
    <tr>
      <td>
        <ol>
          <li>Hello</li>
          <li>World</li>
        </ol>

        <ul>
          <li>Hello</li>
          <li>World</li>
        </ul>
      </td>
      <td>Another cell</td>
    </tr>
  </table>
</div>

    Reference

    Login or Signup to reply.
  2. 0

    Note for any future travelers finding this: Check the edit history for other options that give slightly different results

    We can create a custom counter-style that removes the trailing space that the default counter-style: numeric has.

    ul,
ol {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0 0 0 1.4em;
  font-size: 15px;
  line-height: 24px;
  list-style: none;
}

ol {
  list-style-type: custom-style;
}

ul {
  list-style: disc;
}

table {
  font-family: monospace;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  td {
    position: relative;
    min-width: 137px;
    padding: 7px 6px;
    border: 1px solid #ccc;
    line-height: 20px;
  }
}

@counter-style custom-style {
  /* These lines just basically replicate the `counter-style: numeric` */
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";

  /* This is what goes after the number */
  suffix: ".";
  /* You can imagine the default `numeric` style as */
  /* suffix: ". "; */
}
    <div contenteditable="true">
  <table>
    <tr>
      <td>
        <ol>
          <li>Hello</li>
          <li>World</li>
        </ol>

        <ul>
          <li>Hello</li>
          <li>World</li>
        </ul>
      </td>
      <td>Another cell</td>
    </tr>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search