我无法对齐列表和表单属性

Question

我正在创建一个简单的待办事项列表项目，但我似乎不知道如何对齐列表和表单属性，我该如何解决这个问题？

<?php
                if (isset($_SESSION['task'])) {
                    foreach ($_SESSION['task'] as $key => $task) {
                        echo "
                            <li> <span>$task</span>
                                <form action='delete.php' method='post'>
                                    <input type='hidden' name='task' value=$key>
                                    <input type='checkbox'>
                                    <button>
                                        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>
                                        <path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/>
                                        <path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/>
                                        </svg>
                                    </button>
                                </form>
                            </li>";
                    }
                }
            ?>

我尝试过CSS，也尝试过aligh-items: center，但这些都不起作用。我真的很想将列表、复选框和删除按钮对齐。

Answer 1

尝试使用以下 CSS 样式：

li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block: 10px;
}

您将得到以下提供项目垂直对齐的结果：

此外，您还需要将行组织为表格列。为此，您可以尝试添加以下样式：

ul {
   width: 100%;
}

span {
   width: 80%;
}

form {
  width: 20%;
  display: flex;
  align-items: center;
  gap: 10px;
}