页脚 flexbox 功能不工作

Question

几个月前我刚刚开始做前端 Web 开发，并且仍然习惯于所有属性的工作方式。

出于某种原因，我的页脚没有显示内联图标，而是将它们与文本装饰一起保持垂直

这是我的网站：jarrelthomas.com

和代码

HTML

<footer class="footer">
    <a href="mailto:jarrel.thomas@gmail.com" class="footer-link">Email</a>
    <ul class="social-list">
        <li class="social-list__item"><a class="social-list__link" 
            href="https://www.instagram.com/jct_dev/"><i class="fab fa-instagram"></i></a></li>

        <li class="social-list__item"><a class="social-list__link" 
            href="https://www.linkedin.com/in/jarrel-thomas-2419646a/"><i class="fab fa-linkedin-in"></i></a></li>

        <li class="social-list__item"><a class="social-list__link" 
            href="https://github.com/JarrelThomas"><i class="fab fa-github"></i></a></li>

        <li class="social-list__item"><a class="social-list__link" 
            href="https://twitter.com/JCT_Dev"><i class="fab fa-twitter"></i></a></li>
    </ul>
</footer>

CSS

.footer {
    background: #111;
    color: var(--clr-accent);
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-h3);
}

.footer a { 
    color: inherit;
    text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}

.social-list__item {
    margin: 0 .5em;
}

.social-list__link {
    padding: .5em;
} 

Answer 1

有了.social-list ul是否指定了ul内.social-list ，其中没有作任何说明你的情况。 您可以执行ul.social-list或简单地执行.social-list 。 如果这不是一个简单的问题，那么这里是css specificity的文档。

Answer 2

您包含 flex 代码的 css 选择器不正确。 它应该是ul.social-list而不是.social-list ul 。 因为你要选择一个ul一类社会名单的，而不是一个ul这是什么一类社会列表的孩子。

Answer 3

您的选择器不正确，就像其他人已经提到的那样。 你应该使用：

ul.social-list

顺便说一句，最好将 class:hover 定义放在 class 定义下。

小提琴

 .footer { background: lightcyan; color: var(--clr-accent); text-align: center; padding: 2.5em 0; font-size: var(--fs-h3); } .footer a { color: inherit; text-decoration: none; } .footer__link { font-weight: var(--fw-bold); } ul.social-list { list-style: none; display: flex; justify-content: center; margin: 2em 0 0; padding: 0; } .social-list__item { margin: 0 .5em; } .social-list__link { padding: .5em; } .footer__link:hover, .social-list__link:hover { opacity: .7; } .footer__link:hover { text-decoration: underline; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/> <footer class="footer"> <a href="mailto:jarrel.thomas@gmail.com" class="footer-link">Email</a> <ul class="social-list"> <li class="social-list__item"><a class="social-list__link" href="https://www.instagram.com/jct_dev/"><i class="fab fa-instagram"></i></a></li> <li class="social-list__item"><a class="social-list__link" href="https://www.linkedin.com/in/jarrel-thomas-2419646a/"><i class="fab fa-linkedin-in"></i></a></li> <li class="social-list__item"><a class="social-list__link" href="https://github.com/JarrelThomas"><i class="fab fa-github"></i></a></li> <li class="social-list__item"><a class="social-list__link" href="https://twitter.com/JCT_Dev"><i class="fab fa-twitter"></i></a></li> </ul> </footer>