// Ensure the list is displayed when checked and hidden when unchecked.
function toggleList(event) {
let ol = document.getElementById('list');
if (event.currentTarget.checked) {
ol.style.display = 'initial';
} else {
ol.style.display = 'none';
}
}
show.addEventListener('click', toggleList, 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>The list seems to be aligned to the left with some part sticking out. What is causing this? How can it be fixed? I tried putting the list in a flex container but they still appear misaligned:
function toggleList(event) {
let ol = document.getElementById('list');
if (event.currentTarget.checked) {
ol.style.display = 'initial';
} else {
ol.style.display = 'none';
}
}
show.addEventListener('click', toggleList, 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>Appreciate your help!