Javascript 字体图标不'；t对齐_Javascript_Html_Css_Font Awesome_Font Awesome 4

Javascript 字体图标不'；t对齐

javascript html css

Javascript 字体图标不'；t对齐,javascript,html,css,font-awesome,font-awesome-4,Javascript,Html,Css,Font Awesome,Font Awesome 4,嘿，我的FA图标与按钮对齐有问题。我不知道为什么会发生这种情况，我一直在大致遵循一个教程，做一些我自己能够弄明白的事情，但我似乎找不到解决问题的方法这是我的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

嘿，我的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>

和JS

*{
    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;

}
*/

//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);
}

//选择器
const todoInput=document.querySelector（“.todo输入”）；
const todoButton=document.querySelector（“.todo按钮”）；
const todoList=document.querySelector（“.todo list”）；
//事件侦听器
addEventListener（'click'，addTodo）；
//功能
函数addTodo（事件）{
//阻止表单提交
event.preventDefault（）；
//托多分区
const todoDiv=document.createElement（“div”）；
todoDiv.classList.add（“todo”）；
//创立
const newTodo=document.createElement（“li”）；
newTodo.innerText=“嘿”；
newTodo.classList.add（“待办事项”）；
托多迪夫·阿佩奇尔德（纽托多）；
//完成按钮
const completedButton=document.createElement（“按钮”）；
completedButton.innerHTML=''；
completedButton.classList.add（“completedbtn”）；
todoDiv.appendChild（completedButton）；
//垃圾箱按钮
const trashButton=document.createElement（“按钮”）；
trashButton.innerHTML=''；
垃圾按钮。类列表。添加（“垃圾btn”）；
todoDiv.appendChild（垃圾按钮）；
//附加到列表
托多利斯特。阿佩奇尔德（托多迪夫）；
}

它还没有完成，但我无法忍受它显示按钮的方式。

试试这个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;
}

.fa {
      margin-left: -16px;
    margin-top: -16px;
    position: absolute;
}

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;

}
*/

试试这个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;
}

.fa {
      margin-left: -16px;
    margin-top: -16px;
    position: absolute;
}

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;

}
*/

问题在于你的风格

.trash-btn i

以及添加到按钮的样式。找到下面的重构样式

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
/*背景图像：线性梯度（120度，#f6d365，#fda08f）*/
背景色：#5cdb95；
颜色：#0b0c0b；
字体系列：“Bree衬线”；
最小高度：100vh；
}
h1{
字号：2rem；
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
}
形式{
垫面：2rem；
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
}
表格输入，
窗体按钮{
填充：0.5雷姆；
字号：2rem；
边界：无；
背景：#edf5e1；
}
窗体按钮{
颜色：5cdb95；
背景：#edf5e1；
光标：指针；
过渡：所有0.3秒缓解；
}
窗体按钮：悬停{
颜色：#46a771；
}
.todo集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.待办事项清单{
最小宽度：50%；
列表样式：无；
}
托多先生{
保证金：0.5雷姆；
背景：#379683；
边界半径：10px；
文本对齐：左对齐；
左侧填充：10px；
字体大小：1.5rem；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
李东东先生{
弹性：10%；
}
.垃圾桶，
.完整btn{
背景#5cdb95；
颜色：#edf5e1；
字号：1rem；
利润：4倍2倍；
高度：40px；
宽度：40px；
边界半径：50%；
边界：无；
光标：指针；
}
.垃圾桶{
颜色：rgb（23347 78）；
字号：2rem；
}
.完整btn{
颜色：钢蓝色；
字号：2rem；
}
/*
.垃圾桶btn，.完整btn{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
边界半径：50%；
}
.垃圾桶btn..完整btn:悬停{
光标：指针；
}
.fas fa检查：悬停{
光标：指针；
}
*/

问题在于你的风格

.trash-btn i

以及添加到按钮的样式。找到下面的重构样式

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
/*背景图像：线性梯度（120度，#f6d365，#fda08f）*/
背景色：#5cdb95；
颜色：#0b0c0b；
字体系列：“Bree衬线”；
最小高度：100vh；
}
h1{
字号：2rem；
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
}
形式{
垫面：2rem；
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
}
表格输入，
窗体按钮{
填充：0.5雷姆；
字号：2rem；
边界：无；
背景：#edf5e1；
}
窗体按钮{
颜色：5cdb95；
背景：#edf5e1；
光标：指针；
过渡：所有0.3秒缓解；
}
窗体按钮：悬停{
颜色：#46a771；
}
.todo集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.待办事项清单{
最小宽度：50%；
列表样式：无；
}
托多先生{
保证金：0.5雷姆；
背景：#379683；
边界半径：10px；
文本对齐：左对齐；
左侧填充：10px；
字体大小：1.5rem；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
李东东先生{
弹性：10%；
}
.垃圾桶，
.完整btn{
背景#5cdb95；
颜色：#edf5e1；
字号：1rem；
利润：4倍2倍；
高度：40px；
宽度：40px；
边界半径：50%；
边界：无；
光标：指针；
}
.垃圾桶{
颜色：rgb（23347 78）；
字号：2rem；
}
.完整btn{
颜色：钢蓝色；
字号：2rem；
}
/*
.垃圾桶btn，.完整btn{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
边界半径：50%；
}
.垃圾桶btn..完整btn:悬停{
光标：指针；
}
.fas fa检查：悬停{
光标：指针；
}
*/

您可以通过

.fa-check, .fa-minus-circle{
  position: absolute;
    top: 5px;
    left: 5px;
}

.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;
    position: relative;
}

jshiddle

您可以通过

.fa-check, .fa-minus-circle{
  position: absolute;
    top: 5px;
    left: 5px;
}

.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;
    position: relative;
}

JSFiddle

非常感谢终于奏效了哈哈！我很感激你的回答！非常感谢终于工作了哈哈！我很感激你的回答！