如何调整代码实现与参考图匹配的正确对齐网站页脚

以下是直接可生效的调整内容： #

核心修改点 #

• 修正grid布局参数：原布局行高设置错误，调整为2行布局，同时移除固定百分比高度，增加上下内边距适配内容高度
• 修复列表样式错误：原li行高设为1px导致文字重叠，调整为正常行高，区分导航标题和链接的字体大小、颜色
• 调整logo区域对齐方式：原logo靠右显示，修改为靠左对齐，版权信息与logo保持同对齐逻辑
• 优化边缘元素间距：社交图标增加横向间距，右下角设计标注增加右内边距避免贴边
• 修正细节错误：修复HTML中img标签误加href属性的问题，修正隐私政策链接文本拼写错误

替换代码 #

CSS部分（替换原有#footer及以下所有页脚相关样式） #

#footer {
    font-family: 'Inter', sans-serif;
    display: grid;
    background-color: #000;
    color: #fff;
    padding: 2rem 1.5rem 1.5rem;
    grid-template-rows: auto auto;
    grid-template-columns: 2fr .6fr .6fr 1fr;
    grid-template-areas: 
        "logo product resources business" 
        "social . . design";
    row-gap: 2rem;
}
  
li {
    list-style: none;
    padding-top: 0.6rem;
    font-size: 0.9em;
    line-height: 1.4;
}

li:first-child {
    font-size: 1.1em;
    padding-bottom: 0.3rem;
    color: #fff;
}
  
#footer li a {
    color: rgb(22,145,176);
    text-decoration: none;
}
#footer li a:hover {
    text-decoration: underline;
}
  
.logo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-area: logo;
}
  
.flex {
    display: flex;
    justify-content: flex-start;
}

.img {
    width: 25vh;
    cursor: pointer;
}
  
.copyright {
    margin-top: 0.8rem;
    font-size: 0.95em;
    color: rgb(97,97,97);
}
  
.product {
    grid-area: product;
}
  
.resources {
    grid-area: resources;
}
  
.business {
    grid-area: business;
}

.social { 
    grid-area: social;
    cursor: pointer;
    display: flex;
    gap: 1rem;
}

.design {
    grid-area: design;
    font-size: 0.95em;
    text-align: right;
    color: rgb(97,97,97);
    padding-right: 1rem;
}

HTML部分（替换原有页脚代码） #

<div id="footer">
    <div class="logo">
        <div class="flex">
            <a href="index.html"><img class="img" src="img/logo.svg" alt="Poseidon Logo"></a>
        </div>
        <div class="copyright">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
    </div>
    <ul class="product">
        <li><b>Product</b></li>
        <li><a href="#">Invite</a></li>
        <li><a href="#">Commands</a></li>
        <li><a href="#">Premium</a></li>
    </ul>
    <ul class="resources">
        <li><b>Resources</b></li>
        <li><a href="#">Docs</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Refunds</a></li>
    </ul>
    <ul class="business">
        <li><b>Business</b></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="design">
        designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord ID</span>
    </div>
    <div class="social">
        <a href="https://google.fr"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" alt="github" /></a>
        <a href="#"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" alt="discord" /></a>
        <a href="#"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" alt="twitter" /></a>
    </div>
</div>

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