页脚弹性框功能无法正常运行

编程问答 2022-08-14

问题描述

几个月前，我刚刚开始进行前端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;
}

解决方法

对于.social-list ul，您要在ul内指定.social-list，在您的情况下则不指定任何内容。您可以执行ul.social-list或仅执行.social-list。如果那不是一个简单的麻烦，那么这里是css specificity的文档。

,

您的包含Flex代码的CSS选择器不正确。应该是ul.social-list而不是.social-list ul。因为您想选择一个带有社交列表类别的ul，而不是一个属于某个带有社交列表类别的事物的ul。

,

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

ul.social-list

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

fiddle 

.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>

footerhtml