javascript - 单击时网格中的元素会移动

Question

我有个问题。我确实使用网格来布局页面上的按钮。但是，当我单击“添加新任务”、“修改任务”、“删除任务”等按钮时。这些按钮移到了一边。我不知道如何将它们保持在原位。有人可以向我解释一下? 我确实在下面放了代码来解释问题的样子

var add=document.getElementById("add_task");
function task(){
    document.getElementById("add_form").style.display="block";
}
add.addEventListener("click",task);

var modify_task=document.getElementById("modify_task");
function modify_form(){
    document.getElementById("modify_form").style.display="block";
}
modify_task.addEventListener("click",modify_form);

var delete_task=document.getElementById("delete_task");
function delete_form(){
    document.getElementById("delete_form").style.display="block";
}
delete_task.addEventListener("click",delete_form);

div#add_task_form #add_form{
  display:none;
}
div#add_task_form{
  margin: 20px auto;
}
div#add_task_form #add_form label{
  display:inline-block;
  width: 100px;
  text-align: right;
  font-size: 17px;
  font-weight: bold;
  color: #5e001f;
}
div#add_task_form #add_form input[type="text"]{
  width: 240px;
  height: 20px;
  border: 1px solid #5e001f;
}
div#add_task_form #add_form div{
  margin: 8px;
  padding: 8px;
}
div#add_task_form #add_form #submit_add_form{
  border: 1px solid #5e001f;
  border-radius: 7px;
  width: 120px;
  height: 20px;
  background-color: white;
  color: #5e001f;
  font-size: 14px;
  font-weight: bold;
}
div#add_task_form #add_form #submit_add_form:hover{
  background-color: #5e001f;
  color: white;
}
div#add_task_form #add_task{
  border: 1px solid #5e001f;
  border-radius: 7px;
  width: 120px;
  height: 40px;
  background-color: white;
  color: #5e001f;
  font-size: 14px;
  font-weight: bold;
}
div#add_task_form #add_task:hover{
  background-color: #5e001f;
  color: white;
}
/*
div#add_task_form #add_form_inform{
  margin: 8px;
  padding: 8px;
  font-size: 17px;
  font-weight: bold;
  color: #5e001f;
}
*/
div#modify_task_form #modify_form{
  display: none;
}
div#delete_task_form #delete_form{
  display: none;
}
div#container_all{
  display: grid;
  grid-template: 100px/repeat(3, 1fr);
  grid-template-areas:
    'add modify delete'
}
div#container_all #add_task_form{
  grid-area: add;
  justify-self: center;
}
div#container_all #modify_task_form{
  grid-area: modify;
  justify-self: center;
}
div#container_all #delete_task_form{
  grid-area: delete;
  justify-self: center;
}
div#modify_task_form{
  margin: 20px auto;
}
div#modify_task_form #modify_form label{
  display:inline-block;
  width: 100px;
  text-align: right;
  font-size: 17px;
  font-weight: bold;
  color: #5e001f;
}
div#modify_task_form #modify_form input[type="text"]{
  width: 240px;
  height: 20px;
  border: 1px solid #5e001f;
}
div#modify_task_form #modify_form div{
  margin: 8px;
  padding: 8px;
}
div#modify_task_form #modify_form #submit_modify_form{
  border: 1px solid #5e001f;
  border-radius: 7px;
  width: 120px;
  height: 20px;
  background-color: white;
  color: #5e001f;
  font-size: 14px;
  font-weight: bold;
}
div#modify_task_form #modify_form #submit_modify_form:hover{
  background-color: #5e001f;
  color: white;
}
div#modify_task_form #modify_task{
  border: 1px solid #5e001f;
  border-radius: 7px;
  width: 120px;
  height: 40px;
  background-color: white;
  color: #5e001f;
  font-size: 14px;
  font-weight: bold;
}
div#modify_task_form #modify_task:hover{
  background-color: #5e001f;
  color: white;
}
div#delete_task_form{
  margin: 20px auto;
}
div#delete_task_form #delete_form label{
  display:inline-block;
  width: 100px;
  text-align: right;
  font-size: 17px;
  font-weight: bold;
  color: #5e001f;
}
div#delete_task_form #delete_form input[type="text"]{
  width: 240px;
  height: 20px;
  border: 1px solid #5e001f;
}
div#delete_task_form #delete_form div{
  margin: 8px;
  padding: 8px;
}
div#delete_task_form #delete_form #submit_delete_form{
  border: 1px solid #5e001f;
  border-radius: 7px;
  width: 120px;
  height: 20px;
  background-color: white;
  color: #5e001f;
  font-size: 14px;
  font-weight: bold;
}
div#delete_task_form #delete_form #submit_delete_form:hover{
  background-color: #5e001f;
  color: white;
}
div#delete_task_form #delete_task{
  border: 1px solid #5e001f;
  border-radius: 7px;
  width: 120px;
  height: 40px;
  background-color: white;
  color: #5e001f;
  font-size: 14px;
  font-weight: bold;
}
div#delete_task_form #delete_task:hover{
  background-color: #5e001f;
  color: white;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./main_list.css">
        <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
        <script src="./add_task.js" defer></script>
        <title>Main List</title>
    </head>
    <body>
      <div id="container">
       <button id="buttonMainList"><a href="./logout.php">Logout</a></button>
          <p id="userNameHere"><?php echo $_SESSION['name'] ?></p>
      </div>
      <h1 id="inform">TO DO LIST</h1>
      <div id="container_all">
        <div id="add_task_form">
            <button id="add_task">Add New Task</button>
            <form id="add_form" name="task_form" method="post">
                <div id="title_form">
                    <label for="title">Title</label>
                    <input type="text" name="title" id="title"><br>
                </div>
                <div id="description_form">
                    <label for="description">Description</label>
                    <input type="text" name="description" id="description"><br>
                </div>
                <div id="due_date_form">
                    <label for="due_date">Due Date</label>
                    <input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
                </div>
                <div id="time_form">
                    <label for="time">Time</label>
                    <input type="text" name="time" id="time" placeholder="hh:mi"><br>
                </div>
                    
                    <input id="submit_add_form" type="submit" name="submit" value="Save">
            </form>
            <br>
        </div>
        <div id="modify_task_form">
            <button id="modify_task">Modify Task</button>
            <form id="modify_form" name="modify_form" method="post">
                <div id="modify_section">
                    <label for="modify_com_in">What section?</label>
                    <input type="text" id="modify_com_in" name="modify_com_in"><br>
                </div>
                <div id="modify_section_id">
                    <label for="modify_com_in_id">What ID?</label>
                    <input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
                </div>
                <div id="title_modify_form">
                    <label for="modify_title">Title</label>
                    <input type="text" name="title" id="modify_title"><br>
                </div>
                <div id="description_modify_form">
                    <label for="modify_description">Description</label>
                    <input type="text" name="description" id="modify_description"><br>
                </div>
                <div id="due_date_modify_form">
                    <label for="due_date">Due Date</label>
                    <input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
                </div>
                <div id="time_modify_form">
                    <label for="modify_time">Time</label>
                    <input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
                </div>
                    
                    <input id="submit_modify_form" type="submit" name="modify" value="Modify">
            </form>
            <br>
        </div>
        <div id="delete_task_form">
            <button id="delete_task">Delete Task</button>
            <form id="delete_form" name="delete_form" method="post">
            <div id="delete_section">
                    <label for="delete_com_in">What section?</label>
                    <input type="text" id="delete_com_in" name="delete_com_in"><br>
                </div>
                <div id="delete_section_id">
                    <label for="delete_com_in_id">What ID?</label>
                    <input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
                </div>
                    
                    <input id="submit_delete_form" type="submit" name="delete" value="Delete">
            </form>
            <br>
        </div>
      </div>
    </body>
</html>

标签： javascripthtmlcss