Вопрос или проблема
Я создаю веб-сайт для списка задач, и по какой-то причине у всех созданных задач слишком много пространства вокруг флажка. скриншот добавленных задач.
Я пытался настроить флажок, установив 0 паддинг, 0 маржин, изменил свойства justify-content и align-items задачи, но ничего не помогает. Вот HTML, соответствующая часть CSS и JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>task-ify - разработано livia</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 id="website-title">task-ify</h2>
</header>
<div class="screen">
<form>
<p id="newtask">новая задача</p>
<input type="text" id="task" maxlength="27">
<button type="button" id="savebttn" onclick="saveTask()">сохранить</button>
</form>
<div class="todofield">
<nav>
<p>фильтры:</p>
<button type="button" id="filter" onclick="viewAll()">ВСЕ</button>
<button type="button" id="filter" onclick="viewToDo()">ДЕЛАТЬ</button>
<button type="button" id="filter" onclick="viewDone()">СДЕЛАНО</button>
</nav>
<div class="taskgallery" id="taskgallery">
<div class="taskview" id="taskview">
</div>
</div>
</div>
</div>
<footer><p>создано livia©</p></footer>
<script src="script.js"></script>
</body>
</html>
.taskgallery{
box-sizing: border-box;
border-radius: 8px;
border: 0.1em solid #49311d;
width: 90%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 3em;
padding: 20px;
}
.taskview{
display: flex;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
width: 98%;
height: 98%;
gap: 1.5vw 3vw;
}
#task1{
display: flex;
flex-direction: row;
width: 30%;
height: 5%;
align-content: center;
}
#task1 > label{
margin: 0px 10px;
border-radius: 20px;
width: 95%;
align-content: center;
padding-left: 10px;
font-size: 1.8vh;
color: #0A0903;
background-color: #feaf55;
}
input [type="checkbox"]{
padding: 0 !important;
margin: 0 !important;
}
function saveTask(){
const newTask = document.getElementById('task');
if(newTask.value != ''){
const task = document.createElement('div');
task.className="task";
task.id = 'task1'
const checkbox = document.createElement('input');
checkbox.type="checkbox";
const label = document.createElement('label');
label.textContent = newTask.value;
//task.classList.add('to-do');
checkbox.addEventListener('change', function() {
if (this.checked) {
label.style.textDecoration = 'line-through';
task.classList.remove('to-do');
task.classList.add('done');
} else {
label.style.textDecoration = 'none';
task.classList.remove('done');
task.classList.add('to-do');
}
});
task.appendChild(checkbox);
task.appendChild(label);
document.getElementById('taskview').appendChild(task);
tasks.push(task);
newTask.value="";
}
}
Вероятно опечатка: между input и [type...] не должно быть пробела: input[type="checkbox"], тогда все паддинги и маргины внутри этого блока применяются корректно 🙂 остающийся пробел – это margin из #task1 > label {}.
Прикрепленный рабочий фрагмент ниже
const tasks = [];
function saveTask(){
const newTask = document.getElementById('task');
if(newTask.value != ''){
const task = document.createElement('div');
task.className="task";
task.id = 'task1'
const checkbox = document.createElement('input');
checkbox.type="checkbox";
const label = document.createElement('label');
label.textContent = newTask.value;
//task.classList.add('to-do');
checkbox.addEventListener('change', function() {
if (this.checked) {
label.style.textDecoration = 'line-through';
task.classList.remove('to-do');
task.classList.add('done');
} else {
label.style.textDecoration = 'none';
task.classList.remove('done');
task.classList.add('to-do');
}
});
task.appendChild(checkbox);
task.appendChild(label);
document.getElementById('taskview').appendChild(task);
tasks.push(task);
newTask.value="";
}
}.taskgallery {
box-sizing: border-box;
border-radius: 8px;
border: 0.1em solid #49311d;
width: 90%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 3em;
padding: 20px;
}
.taskview {
display: flex;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
width: 98%;
height: 98%;
gap: 1.5vw 3vw;
}
#task1 {
display: flex;
flex-direction: row;
width: 30%;
height: 5%;
align-content: center;
}
#task1 > label {
margin: 0px 10px;
border-radius: 20px;
width: 95%;
align-content: center;
padding-left: 10px;
font-size: 1.8vh;
color: #0a0903;
background-color: #feaf55;
}
input[type="checkbox"] {
padding: 0 !important;
margin: 0 !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79057467/styles.css" />
<title>task-ify - разработано livia</title>
</head>
<body>
<header>
<h2 id="website-title">task-ify</h2>
</header>
<div class="screen">
<form>
<p id="newtask">новая задача</p>
<input type="text" id="task" maxlength="27" />
<button type="button" id="savebttn" onclick="saveTask()">сохранить</button>
</form>
<div class="todofield">
<nav>
<p>фильтры:</p>
<button type="button" id="filter" onclick="viewAll()">ВСЕ</button>
<button type="button" id="filter" onclick="viewToDo()">ДЕЛАТЬ</button>
<button type="button" id="filter" onclick="viewDone()">СДЕЛАНО</button>
</nav>
<div class="taskgallery" id="taskgallery">
<div class="taskview" id="taskview"></div>
</div>
</div>
</div>
<footer><p>создано livia©</p></footer>
<script src="script.js"></script>
</body>
</html>Ответ или решение
Проблема с избыточным кликабельным пространством вокруг чекбокса может быть связана с несколькими факторами. Вы уже упомянули, что пытались изменить отступы и стили, но давайте более детально рассмотрим ваш код и укажем, что именно можно улучшить.
Наиболее вероятная причина избыточного пространства — это ошибка в селекторе CSS для чекбокса. У вас используется селектор input [type="checkbox"], где стоит пробел между input и [type="checkbox"]. Это может вызывать неправильное применение стилей. Правильный селектор должен выглядеть так: input[type="checkbox"]. Это позволит правильно применять отступы и внешние отступы (margins) к чекбоксу.
Кроме того, я заметил, что у вас есть CSS для label, который устанавливает отступы, и они могут также влиять на восприятие кликабельной области. Давайте внесем следующие изменения в ваш CSS:
input[type="checkbox"] {
padding: 0 !important;
margin: 0 !important;
width: auto; /* Устанавливаем ширину авто для минимизации пространства */
}
#task1 {
display: flex;
flex-direction: row;
width: 30%;
align-items: center; /* Центрируем элементы по вертикали */
}
#task1 > label {
margin: 0px 10px; /* Это может быть скорректировано, если нужно уменьшить отступы */
border-radius: 20px;
flex: 1; /* Позволяет метке занимать оставшееся пространство */
font-size: 1.8vh;
color: #0A0903;
background-color: #feaf55;
padding: 5px; /* Добавьте небольшой отступ для улучшения внешнего вида, если необходимо */
}Также рекомендуется сделать следующее в вашей JavaScript функции saveTask() для более точного отображения:
function saveTask() {
const newTask = document.getElementById('task');
if (newTask.value != '') {
const task = document.createElement('div');
task.className = "task";
task.id = 'task1';
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
const label = document.createElement('label');
label.textContent = newTask.value;
checkbox.addEventListener('change', function() {
if (this.checked) {
label.style.textDecoration = 'line-through';
task.classList.remove('to-do');
task.classList.add('done');
} else {
label.style.textDecoration = 'none';
task.classList.remove('done');
task.classList.add('to-do');
}
});
task.appendChild(checkbox);
task.appendChild(label);
document.getElementById('taskview').appendChild(task);
tasks.push(task);
newTask.value = "";
}
}После этих изменений у вас должно измениться восприятие кликабельного пространства вокруг чекбокса, и его размер будет лучше соответствовать ожиданиям.
Если необходимо, вы можете дополнительно при необходимости провести эксперимент с отступами метки, чтобы еще больше оптимизировать размещение элементов в вашем приложении.