我想使用来自不同样式表的不同图标，因为并非所有图标都可以在我想使用的 1 个样式表中使用。当我尝试这样做时，它会导致高度问题。一个图标向上离开并留下一些底部空间，另一个图标看起来像是必需的。可以做些什么来将它们与相同的高度对齐？如果你看到字体真棒的最后一个图标的高度留下了一些底部空间......
<!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;
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</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>将页脚更改为显示为 flex 可以解决此问题：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
/* float: left; */
display: flex; /* Consider flex layout */
color: black;
justify-content: center; /* Alignment of icons */
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</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>试试这个，为"i"标签添加了行高和字体大小
<!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>