【发布时间】：2020-08-11 23:22:17
【问题描述】：
嘿，我在将 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);
}
它还没有完成，但我无法忍受它显示按钮的方式。
【问题讨论】：
标签： javascript html css font-awesome font-awesome-4