Html 使用多个样式表的图标会导致高度/对齐问题
我想从不同的样式表中使用不同的图标，因为不是所有的图标都可以在我想使用的一个样式表中使用。当我尝试这样做时，它会导致高度问题。一个图标在上面留下一些底部空间，另一个图标看起来像它需要的那样。如何将它们与相同高度对齐？如果看到字体最后一个图标的高度，请留下一些底部空间Html 使用多个样式表的图标会导致高度/对齐问题,html,css,responsive,Html,Css,Responsive,我想从不同的样式表中使用不同的图标，因为不是所有的图标都可以在我想使用的一个样式表中使用。当我尝试这样做时，它会导致高度问题。一个图标在上面留下一些底部空间，另一个图标看起来像它需要的那样。如何将它们与相同高度对齐？如果看到字体最后一个图标的高度，请留下一些底部空间 .页脚{ 位置：固定； 左：0； 底部：0； 宽度：100%； 背景色：红色； 颜色：白色； 文本对齐：居中； } .页脚a{ 浮动：左； 显示：块； 颜色：黑色； 文本对齐：居中； 填充：14px 0px； 文字装饰：无； 字
.页脚{
位置：固定；
左：0；
底部：0；
宽度：100%；
背景色：红色；
颜色：白色；
文本对齐：居中；
}
.页脚a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 0px；
文字装饰：无；
字号：17px；
宽度：20%；
底部：0；
页边距底部：0；
}
.footer a:悬停{
背景色：#ddd；
颜色：黑色；
}
.页脚a.活动{
背景色：#2196F3；
颜色：白色；
}
固定/粘性页脚示例
页脚位于页面底部
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
text-decoration: none;
/*removed padding*/
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
/* added this */
.footer a i{
font-size: 24px;
line-height: 50px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="fa fa-tachometer"></i></a>
</div>
</body>
</html>
.页脚{
位置：固定；
左：0；
底部：0；
宽度：100%；
背景色：红色；
颜色：白色；
文本对齐：居中；
}
.页脚a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
/*去除填充物*/
宽度：20%；
底部：0；
页边距底部：0；
}
.footer a:悬停{
背景色：#ddd；
颜色：黑色；
}
.页脚a.活动{
背景色：#2196F3；
颜色：白色；
}
/*加上这个*/
.页脚a i{
字体大小：24px；
线高：50px；
}
固定/粘性页脚示例
页脚位于页面底部
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
text-decoration: none;
/*removed padding*/
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
/* added this */
.footer a i{
font-size: 24px;
line-height: 50px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="fa fa-tachometer"></i></a>
</div>
</body>
</html>
.页脚{
位置：固定；
左：0；
底部：0；
宽度：100%；
背景色：红色；
颜色：白色；
文本对齐：居中；
}
.页脚a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
/*去除填充物*/
宽度：20%；
底部：0；
页边距底部：0；
}
.footer a:悬停{
背景色：#ddd；
颜色：黑色；
}
.页脚a.活动{
背景色：#2196F3；
颜色：白色；
}
/*加上这个*/
.页脚a i{
字体大小：24px；
线高：50px；
}
固定/粘性页脚示例
页脚位于页面底部
.页脚{
显示器：flex；
位置：固定；
左：0；
底部：0；
宽度：100%；
背景色：红色；
颜色：白色；
文本对齐：居中；
}
.页脚a{
/*浮动：左*/
显示：Flex；/*考虑Flex布局*//
颜色：黑色；
对齐内容：居中；/*图标对齐*/
填充：14px 0px；
文字装饰：无；
字号：17px；
宽度：20%；
底部：0；
页边距底部：0；
}
.footer a:悬停{
背景色：#ddd；
颜色：黑色；
}
.页脚a.活动{
背景色：#2196F3；
颜色：白色；
}
固定/粘性页脚示例
页脚位于页面底部
.页脚{
显示器：flex；
位置：固定；
左：0；
底部：0；
宽度：100%；
背景色：红色；
颜色：白色；
文本对齐：居中；
}
.页脚a{
/*浮动：左*/
显示：Flex；/*考虑Flex布局*//
颜色：黑色；
对齐内容：居中；/*图标对齐*/
填充：14px 0px；
文字装饰：无；
字号：17px；
宽度：20%；
底部：0；
页边距底部：0；
}
.footer a:悬停{
背景色：#ddd；
颜色：黑色；
}
.页脚a.活动{
背景色：#2196F3；
颜色：白色；
}
固定/粘性页脚示例
页脚位于页面底部