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

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>

谢谢！

标签： javascripthtmlcssalignmenthtml-lists

Answer 1

试试这个CSS：

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

输入有一些padding和margin。我已将其删除。此外，使用 . 从列表中删除样式list-style-type。密码笔