个人中心
gpt4 book ai didi

html - 即使 span 和 li 标签的高度相同，我在 li 标签内的 span 标签也没有正确对齐

转载 作者：行者123 更新时间：2023-11-27 22:49:49 24 4
gpt4 key购买 nike

从图像中可以看出，将图标放在该位置没有任何冲突。它应该自然地与 li 标签对齐，因为 li 和 span 标签的高度相同。我尝试了其他人在 udemy 类(class)中做同样的元素。我将他们的 css 文件复制粘贴到我的 css 中。猜猜它以同样的方式出现。

这是我正在处理的待办事项列表。我是初学者。

body {
    background: #03001e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #fdeff9, #ec38bc, #7303c0, #03001e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
h1 {
    background: #2980b9;
    color:white;
    margin:0;
    text-transform: uppercase;
    padding: 10px 20px;
   font-size: 24px;
    font-weight:normal;
}
.fa-pencil-alt
{
    float:right;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
}
#container {
     border: solid 2px gray;
     width:380px; 
     margin: 100px auto;
     background:#f7f7f7;
     box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
    color:gray;
    text-decoration: line-through;
}

body {font-family:Roboto;}
li{

    background:white;
    height:40px;
    line-height: 40px;
    color:#666;
}
li:nth-child(2n)
{
    background:#f7f7f7;
}
input {
    font-size:18px;
    background-color: #f7f7f7;
    width:100%;
    padding: 13px 13px 13px 20px;
    box-sizing: border-box;
    color:#2980b9;
    border: 3px solid rgba(0,0,0,0);
}
input:focus {
    background: #fff;
    border: 3px solid  #2980b9;
    outline: none;
}

span {
    background:#e74c3c;
    height: 40px;
    margin-right:20px;
    text-align: center;
    color:white;
   width:40px; 
    display: inline-block;
    transition:0.2s linear; 
    opacity:1.0;
}
```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript"
    src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/1.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/8706ae3761.js" crossorigin="anonymous"></script>
</head>
<body>
    
<div id="container">
    <h1>Todo List <i class="fas fa-pencil-alt"></i></h1>
    <input type="text" placeholder="Add New Todos">
    <ul>
        <li><span><i class="fas fa-trash"></i>  </span> Homework</li>
        <li><span><i class="fas fa-trash"></i>  </span> Exercise</li>
        <li><span><i class="fas fa-trash"></i>  </span> Gaming</li>
        <li><span><i class="fas fa-trash"></i>  </span> Dinner</li>
    </ul>
</div>

<script src="sandbox.js"></script>    
</body>
</html>

enter image description here

enter image description here

最佳答案

从 li 标签中删除高度和行高并使用 span 的顶部/底部填充进行管理

body {
    background: #03001e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #fdeff9, #ec38bc, #7303c0, #03001e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
h1 {
    background: #2980b9;
    color:white;
    margin:0;
    text-transform: uppercase;
    padding: 10px 20px;
   font-size: 24px;
    font-weight:normal;
}
.fa-pencil-alt
{
    float:right;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
}
#container {
     border: solid 2px gray;
     width:380px; 
     margin: 100px auto;
     background:#f7f7f7;
     box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
    color:gray;
    text-decoration: line-through;
}

body {font-family:Roboto;}
li{

    background:white;
    color:#666;
    /* height: 40px;
    line-height: 40px;*/
}
li:nth-child(2n)
{
    background:#f7f7f7;
}
input {
    font-size:18px;
    background-color: #f7f7f7;
    width:100%;
    padding: 13px 13px 13px 20px;
    box-sizing: border-box;
    color:#2980b9;
    border: 3px solid rgba(0,0,0,0);
}
input:focus {
    background: #fff;
    border: 3px solid  #2980b9;
    outline: none;
}

span {
    background:#e74c3c;
    /*height: 40px;*/
    margin-right:20px;
    text-align: center;
    color:white;
   width:40px; 
    display: inline-block;
    transition:0.2s linear; 
    opacity:1.0;
    padding:15px 0px;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript"
    src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/1.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/8706ae3761.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="container">
    <h1>Todo List <i class="fas fa-pencil-alt"></i></h1>
    <input type="text" placeholder="Add New Todos">
    <ul>
        <li><span><i class="fas fa-trash"></i>  </span> Homework</li>
        <li><span><i class="fas fa-trash"></i>  </span> Exercise</li>
        <li><span><i class="fas fa-trash"></i>  </span> Gaming</li>
        <li><span><i class="fas fa-trash"></i>  </span> Dinner</li>
    </ul>
</div>

<script src="sandbox.js"></script>    
</body>
</html>

关于html - 即使 span 和 li 标签的高度相同，我在 li 标签内的 span 标签也没有正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59501976/

24 4 0
文章推荐： javascript - Sheets API v4 - JS 客户端 : How to add/append a new row to an existing Sheet
文章推荐： html - 未应用 Bootstrap 4 卡片组等高
文章推荐： c++ - 没有合适的默认构造函数可用 - 默认构造函数在哪里调用？
文章推荐： javascript - 根据数组内关联对象的属性对 div 元素进行排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com