复选框周围的可点击空间太多

问题描述 投票：0回答：1

我正在构建一个待办事项列表网站，由于某种原因，创建的所有任务在复选框周围都有太多空间。 添加的任务的屏幕截图。

我尝试将复选框样式设置为 0 填充、0 边距，更改任务的对齐内容和对齐项目，但似乎没有任何效果。这是 html、css 和 javascript 的相关部分：

<!DOCTYPE html>
<html>
    <head>
        <title>task-ify - by 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">new task</p>
                <input type="text" id="task" maxlength="27">
                <button type="button" id="savebttn" onclick="saveTask()">save</button>
            </form>
            <div class="todofield">
                <nav>
                    <p>filters:</p>
                    <button type="button" id="filter" onclick="viewAll()">ALL</button>
                    <button type="button" id="filter" onclick="viewToDo()">TO-DO</button>
                    <button type="button" id="filter" onclick="viewDone()">DONE</button>
                </nav>
                <div class="taskgallery" id="taskgallery">
                    <div class="taskview" id="taskview">
                    </div>
                </div>
            </div>
        </div>
        <footer><p>made by livia&copy;</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 = '';
    }
}
javascript html css input checkbox
1个回答
0
投票

可能是拼写错误：

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="styles.css" />
    <title>task-ify - by livia</title>
  </head>

  <body>
    <header>
      <h2 id="website-title">task-ify</h2>
    </header>
    <div class="screen">
      <form>
        <p id="newtask">new task</p>
        <input type="text" id="task" maxlength="27" />
        <button type="button" id="savebttn" onclick="saveTask()">save</button>
      </form>
      <div class="todofield">
        <nav>
          <p>filters:</p>
          <button type="button" id="filter" onclick="viewAll()">ALL</button>
          <button type="button" id="filter" onclick="viewToDo()">TO-DO</button>
          <button type="button" id="filter" onclick="viewDone()">DONE</button>
        </nav>
        <div class="taskgallery" id="taskgallery">
          <div class="taskview" id="taskview"></div>
        </div>
      </div>
    </div>
    <footer><p>made by livia&copy;</p></footer>
    <script src="script.js"></script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.