Я собираю простое приложение для задач, в котором отдельные флажки и принадлежащие им ярлыки создаются динамически, когда пользователь нажимает кнопку «Добавить». Я хотел бы, чтобы созданные флажки были выровнены по левому краю во время создания относительно левой стороны текстового поля ввода. На самом деле я мог бы решить эту часть, используя свойство margin-left.
Я бы хотел, чтобы флажки оставались на месте при изменении размера окна браузера слева или справа, и они продолжали придерживаться крайняя левая часть текстового поля ввода.
Черная вертикальная линия на изображении - это ориентир, который я нарисовал, чтобы указать, где я хочу, чтобы мои флажки закреплялись при изменении размера окна
индекс. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JavaScript Todo App</title>
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
</head>
<body>
<div class="outerContainer">
<div id="top" class="topContainer">
<label for="todoInput">
<input id="todoInput" type="text">
</label>
<button id="addButton">Add</button>
</div>
<div id="middle" class="middleContainer">
<ul id="todoList" class="middleTodoList"></ul>
</div>
</div>
</body>
<script src="js/todo.js"></script>
</html>
myStyle. css
li {
list-style: none;
}
input[type=checkbox]:checked + label {
text-decoration: line-through;
}
.outerContainer {
}
.topContainer {
text-align: center;
}
.middleContainer {
}
.middleTodoList {
text-align: center;
}
todo. js
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');
let listElementId = 0;
addButton.addEventListener('click', event => {
const checkBox = document.createElement('input');
checkBox.setAttribute("type", "checkbox");
checkBox.setAttribute("id", todoInput.value);
const itemLabel = document.createElement('label');
itemLabel.setAttribute('for', todoInput.value);
const bottomDivision = document.getElementById('middle');
const listElement = document.createElement('li');
const todoInputValue = todoInput.value;
if (todoInputValue) {
listElement.id = 'list-item-' + listElementId++;
itemLabel.append(todoInputValue);
listElement.append(checkBox, itemLabel);
todoList.append(listElement);
document.body.appendChild(bottomDivision);
}
todoInput.value = '';
});