如何将LI编号保留在OL中

Question

当LI数字的字体大小增加时，数字离开OL容器（粉红色）。

是否有增加数字大小但将所有内容保留在粉红色区域内的方法？

这里是一个例子：

String value = playerStats.get(0).get(2); // first row, third column

ol {
  background: pink;
}

li {
  font-size: 50px;
}

span {
  font-size: 30px;
}

Answer 1

ol {
  background: pink;
  list-style-position: inside;
}

Answer 2

如果您只使用50px的固定字体大小，则可以在OL元素中添加一个填充：

ol {
  padding-left: 70px;
  background: pink;
}

但是，如果您要使用较凉的东西，则可以执行以下操作：

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}

Answer 3

运行此代码

 ol {
      background: pink;
      list-style-position: inside;
    }

    <ol>
      <li>
        <span>car</span>
      </li>
      <li>
        <span>plane</span>
      </li>
      <li>
        <span>boat</span>
      </li>
    </ol>