我在布局上遇到麻烦

我在布局上遇到麻烦

链接元素无法正确显示。我尝试为其设置一个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>

最佳答案

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>




这是你在找什么?

关于css - 我在布局上遇到麻烦,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56262720/

10-12 03:28