Блог

Главная - Вопросы по программированию - Упорядоченные списки смещаются влево при изменении свойства отображения

Упорядоченные списки смещаются влево при изменении свойства отображения

#javascript #html #css #alignment #html-lists

Вопрос:

 // 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>

Список сдвинут влево, как видно, есть какая-то часть, которая торчит. Почему это происходит? Как это остановить? Я упаковал список в гибкий контейнер, но они, похоже, сдвинуты вправо:

 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>

Спасибо!

Комментарии:

1. вы хотите, чтобы пуля была перед вашим пунктом списка?

2. @TusharShahi Нет, я хочу, чтобы они отображались как обычные списки, а не сдвигались влево или вправо.

Ответ №1:

Попробуйте этот css:

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

На входе есть некоторые padding и margin . Я удалил его. Кроме того, удалил стиль из списка с помощью list-style-type . Кодовое имя

Комментарии:

1. Но тогда как заполнение input влияет на список?

2. Правильно, Это не так. На самом деле, из-за заполнения ввод выглядит немного справа. Я удалил его, чтобы они выровнялись. Список не сдвигается вправо, ввод смещается влево.

Метки: