更改显示时有序列表向左移动属性

Question

// If checked, set display to 'initial' otherwise set it to 'none'.

function check(event) {
  let ol = document.getElementById('list');
  if (event.currentTarget.checked) {
    ol.style.display = 'initial';
  } else {
    ol.style.display = 'none';
  }
}

show.addEventListener('click', check, false);

ol    {display: none;}
label {user-select: none;}

<input id="show" type="checkbox" />
<label for="show">Show list</label>

<ol id="list">
  <li>list</li>
</ol>

如图所示，列表向左移动，其中有一部分突出。为什么会这样？如何阻止它？我将列表打包在一个 flex 容器中，但它们似乎向右移动了：

function check(event) {
  let ol = document.getElementById('list');
  if (event.currentTarget.checked) {
    ol.style.display = 'initial';
  } else {
    ol.style.display = 'none';
  }
}

show.addEventListener('click', check, false);

ol {
  display: none;
}

label {
  user-select: none;
}

div {
  display: flex;
  justify-content: left;
}

<input id="show" type="checkbox" />
<label for="show">Show List 1</label>

<div>
  <ol id="list">
    <li>list 1</li>
  </ol>
</div>

谢谢！

Answer 1

试试这个 css:

ol    {display: none;
list-style-type: none;}
label {user-select: none;}
input {padding: 0; margin: 0;}

输入有一些 padding 和 margin。我已经删除了它。此外，使用 list-style-type 从列表中删除样式。 Codepen

更改显示时有序列表向左移动属性

Ordered lists shifted to the left when altering the display property

html

javascript

css

alignment

html-lists

更改显示时有序列表向左移动 属性

Ordered lists shifted to the left when altering the display property

html

javascript

css

alignment

html-lists

更改显示时有序列表向左移动属性