如何修复HTML和CSS中的UL列表：添加标题页脚并保持列表项左对齐

核心布局思路 #

把标题、图标列表、页脚放在一个居中的容器里，容器限制宽度并水平居中；图标列表本身保持水平居中，但列表项设置左对齐；标题和页脚默认占满容器宽度，直接设置文本居中即可。

完整代码实现 #

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3D社交图标</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="page-container">
        <h1 class="page-title">我的社交平台</h1>
        <ul class="social-icons">
            <li><a href="#" class="icon">GitHub</a></li>
            <li><a href="#" class="icon">Twitter</a></li>
            <li><a href="#" class="icon">LinkedIn</a></li>
            <li><a href="#" class="icon">Instagram</a></li>
        </ul>
        <footer class="page-footer">© 2024 版权所有</footer>
    </div>
</body>
</html>

CSS 样式

/* 全局基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 2rem 0;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

/* 页面容器：水平居中，限制最大宽度 */
.page-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center; /* 让内部行内/行内块元素居中 */
}

/* 标题样式 */
.page-title {
    margin-bottom: 2rem;
    color: #333;
    font-size: 2rem;
}

/* 社交图标列表：居中容器，列表项左对齐 */
.social-icons {
    display: inline-block; /* 让列表宽度由内容决定，同时继承父容器的居中 */
    text-align: left; /* 列表项左对齐 */
    list-style: none;
}

/* 3D图标样式（保留你原有的3D效果） */
.social-icons .icon {
    display: block;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icons .icon:hover {
    transform: translateY(-5px) rotateX(5deg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* 页脚样式 */
.page-footer {
    margin-top: 2rem;
    color: #666;
    font-size: 0.9rem;
}

关键细节说明 #

1. .page-container：用max-width限制宽度，margin: 0 auto实现水平居中，text-align: center让内部的social-icons（inline-block元素）水平居中。
2. .social-icons：设置为display: inline-block，这样它的宽度由列表内容决定，同时能被父容器的text-align: center居中；再设置text-align: left让列表项左对齐，解决了UL居中但列表项左对齐的需求。
3. 标题和页脚：直接放在容器内，默认占满容器宽度，设置text-align: center（或继承父容器的）就能实现文本居中，不会和图标并排。

这样修改后，标题会在图标列表上方居中显示，页脚在列表下方居中，图标列表整体居中但每个列表项左对齐，完全符合需求。

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