gpt4 book ai didi

html - 为什么前两个图标的行高在 chrome 中不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 07:26:07 25 4
gpt4 key购买 nike

它在这里工作正常,但是当我将代码移动到单独的 html 和 css 文件,并在 chrome 浏览器中运行它时,前两个图标比第三个图标高,如图所示:
the image

我的问题是:为什么前两个图标的行高在 chrome 中不起作用?导致前两个图标比第三个图标高,如何解决?我只想水平对齐图标

.box {
padding: 12px 24px;
display: block;
float: left;
line-height: 1.5;
font-size: 32px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>

<div class="theme-bar"><a class="box"><i class="fas fa-globe"></i></a><a class="box"><i class="fas fa-user"></i></a><a class="box"><i class="fas fa-bell"></i><span>3</span></a>
</div>
</body>
</html>

最佳答案

试试这个

.box {
padding: 12px 24px;
display: block;
float: left;
font-size: 32px;
}

.box i {
line-height: 1.5;
}
<html lang="en">

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>

<body>
<div class="theme-bar"><a class="box"><i class="fas fa-globe"></i></a><a class="box"><i class="fas fa-user"></i></a><a class="box"><i class="fas fa-bell"></i><span>3</span></a>
</div>
</body>

</html>

关于html - 为什么前两个图标的行高在 chrome 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49874070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com