链接元素无法正确显示。我试图为其设置一个line-height属性,但是它没有用。而不是这个<li>
元素具有height属性。
P.S对不起,我的英语
footer {
width: 100%;
background: #eee;
position: fixed;
bottom: 0;
text-align: center;
}
footer p {
line-height: 40px;
display: inline-block;
margin:25px 20px 25px 0;
padding: 0 25px;
border-right: 1px solid #aaa;
}
footer ul {
display: inline-block;
width: 140px;
list-style: none;
margin: 25px 0;
padding: 0;
line-height: 40px;
}
footer li {
display: inline-block;
line-height: 40px;
}
footer a {
font-size: 25px;
color: #aaa;
text-decoration: none;
margin: 0 10px;
}
<footer>
<p>Some text</p>
<ul>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-telegram-plane"></a></li>
<li><a href="#" class='fab fa-behance'></a></li>
</ul>
</footer>
答案 0 :(得分:1)
footer {
width: 100%;
background: #eee;
position: fixed;
bottom: 0;
text-align: center;
}
footer p {
line-height: 40px;
display: inline-block;
margin:25px 20px 25px 0;
padding: 0 25px;
border-right: 1px solid #aaa;
}
footer ul {
display: inline-block;
width: 140px;
list-style: none;
margin: 25px 0;
padding: 0;
}
footer li {
display: inline-block;
}
footer a {
font-size: 25px;
color: #aaa;
text-decoration: none;
vertical-align:middle;
margin: 0 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<footer>
<p>Some text</p>
<ul>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-telegram-plane"></a></li>
<li><a href="#" class='fab fa-behance'></a></li>
</ul>
</footer>