嘿，我在将我的 FA 图标与按钮对齐时遇到问题。我不知道为什么会发生这种情况我一直在大致遵循教程并做一些我自己能够解决的事情，但我似乎无法找到解决我的问题的方法。
这是我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<title>To Do List</title>
</head>
<body>
<head>
<h1>To Do List</h1>
</head>
<form>
<input type="text" class="todo-input">
<button class="todo-button">
<i class="fas fa-plus-square"></i>
</button>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="./app.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
h1{
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form{
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input, form button{
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button{
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover{
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li{
flex: 10%;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn{
color: rgb(233, 47, 78);
font-size: 2rem;
}
.trash-btn i{
vertical-align: middle;
display: inline-block;
margin-right: 15px;
}
.complete-btn{
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/
和 JS
//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//event listeners
todoButton.addEventListener('click', addTodo);
//functions
function addTodo(event){
//prevent form from submitting
event.preventDefault();
//todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create li
const newTodo = document.createElement("li");
newTodo.innerText = "hey";
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
//completed button
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fa fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fa fa-minus-circle"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//append to list
todoList.appendChild(todoDiv);
}
它还没有完成，但我无法忍受它显示按钮的方式。