CSS布局问题：Footer中社交媒体链接误定位至右下角（应在右上角）

问题根源 #

你的代码里有两个关键问题导致社交媒体链接位置不符合预期：

1. 平板/桌面端的footer网格模板（grid-template-areas）遗漏了section-2，导致社交板块被挤到下方区域
2. 社交板块的内容对齐方式设置错误，没有让内容靠右上角排列

具体修改步骤 #

以下是简单直白的修改操作，每一步都标注清楚修改点：

1. 修复平板/桌面端的Footer网格布局

在@media (min-width:768px)的footer样式里，把网格区域改回包含section-2，同时让两个板块垂直方向靠顶部对齐：

@media only screen and (min-width: 768px) {
    footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 修复网格区域，让两个板块在同一行 */
        grid-template-areas:
            "section-1 section-2";
        background-color: black;
        color: white;
        /* 让板块内容垂直靠顶部 */
        align-items: start;
    }
    /* 其他原有样式保持不变 */
}

2. 调整社交媒体板块的内容对齐

修改footer .section-2 ul的样式，让链接水平靠右、垂直靠顶部，同时移除多余的内边距避免偏移：

@media only screen and (min-width: 768px) {
    footer .section-2 ul {
        display: flex;
        flex-flow: row wrap;
        /* 垂直方向靠顶部 */
        align-items: flex-start;
        /* 水平方向靠右 */
        justify-content: flex-end;
        /* 移除多余的左内边距 */
        padding-left: 0;
    }
    /* 其他原有样式保持不变 */
}

3. 可选：优化移动端社交板块对齐

如果想让移动端的社交链接也靠右，可以给移动端的footer .section-2 ul加一行样式：

footer .section-2 ul {
    margin-right: 70px;
    padding-left: 30px;
    /* 移动端社交链接靠右对齐 */
    text-align: right;
}

修改后的完整CSS代码 #

footer {
    width: 100%;
    padding: 25px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "section-1 section-2";
    background-color: black;
    color: white;
}

.section-1 {
    grid-area: section-1;
}

.section-2 {
    grid-area: section-2;
}

footer .section-1 ul {
    padding-left: 50px;
}

footer .section-2 ul {
    margin-right: 70px;
    padding-left: 30px;
    /* 移动端社交链接靠右 */
    text-align: right;
}

footer section ul li {
    padding: 3px 0;
    font-size: 16px;
}

footer section ul li h3 {
    padding-bottom: 5px;
    font-size: 22px;

}
@media only screen and (min-width: 768px) {
    /* < FOOTER > (desktop & tablet resolution) */
    footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "section-1 section-2";
        background-color: black;
        color: white;
        /* 垂直对齐顶部 */
        align-items: start;
    }

    footer .section-1 ul {
        padding-left: 70px;
    }

    footer .section-2 ul {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        /* 水平靠右 */
        justify-content: flex-end;
        padding-left: 0;
    }

    footer section ul li {
        font-size: 20px;
    }

    footer section ul li h3 {
        padding-bottom: 10px;
        font-size: 25px;
    }

    footer .section-2 ul li {
        padding: 0 18px;
    }
}

最终效果 #

• 移动端：两个板块左右分布，社交链接靠右对齐
• 平板/桌面端：社交链接水平排列在右上角，和左侧站点链接保持同一行顶部对齐

内容的提问来源于stack exchange，提问作者brubineu