我在布局上遇到麻烦

时间:2019-05-22 18:14:40

标签: css layout

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

1 个答案:

答案 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>
这是你在找什么?