HTML中标题栏与内容栏文本对齐异常的解决方案求助

你的核心问题是标题栏（.title）和内容栏（.list）的对应列宽不匹配，加上flex容器内元素宽度总和超出100%，导致文本无法对齐。以下是具体修复方案：

问题分析 #

• 原代码中.title的三个span宽度设置为60%、40%、20%，总和120%，超出容器宽度后布局会自动压缩，实际宽度和设置值不符；
• .list的三个span宽度是50%、40%、10%，和标题栏的列宽完全不对应，自然无法对齐；
• 未统一单元格内文本的对齐方式，进一步加剧了错位感。

修复步骤 #

1. 统一列宽比例：让标题和内容的对应列宽度完全一致，且总和为100%，比如设置为60%、30%、10%；
2. 统一文本对齐：给所有span设置text-align: left（或你需要的对齐方式），确保同一列的文本位置一致；
3. 清理冗余设置：移除当前场景不需要的属性，比如.list的position: relative。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top Songs Spotify</title>
    <style>
        body{
            background-color: #0f0f1b;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: normal;
            color: #fff;
            min-height: 1000px;
            letter-spacing: .6px;
        }
        .container{
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
        }
        header{
            text-align: center;
        }
        header h1{
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 0;
        }
        header h3{
            font-size: 20px;
            font-weight: 400;
            margin-bottom: 0;
        }
       .body_content{
            margin-top: 30px;
       }
       .body_content .title{
            background: #414072;
            color: #fff;
            padding: 20px 5px;
            border-radius: 10px;
            display: flex;
       }
       .body_content .title span{
            font-size: 15px;
            text-align: left; /* 统一文本对齐 */
       }
       .body_content .title span:nth-child(1)
       {
            width: 60%; /* 统一列宽 */
       }
       .body_content .title span:nth-child(2){
            width: 30%; /* 统一列宽 */
       }
       .body_content .title span:nth-child(3){
            width: 10%; /* 统一列宽 */
       }
       .body_content .list{
            padding: 15px 5px;
            background: #000;
            border: 1px solid transparent;
            border-radius: 10px;
            margin-top: 25px;
            display: flex;
            align-items: center;
       }
       .body_content .list span{
            font-size: 15px;
            text-align: left; /* 统一文本对齐 */
       }
       .body_content .list span:nth-child(1){
               width: 60%; /* 和标题对应列宽一致 */
       }
       .body_content .list span:nth-child(2){
               width: 30%; /* 和标题对应列宽一致 */
       }
       .body_content .list span:nth-child(3){
               width: 10%; /* 和标题对应列宽一致 */
       }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="container">
        <header>
            <h1>TOP PICKED SPOTIFY SONGS</h1>
            <h3>Welcome User</h3>
        </header>
        <div class="body_content">
            <div class="title">
                <span>TITLE</span>
                <span>ARTIST</span>
                <span>PLAY</span>
            </div>
            <div class="list">
                <span>Song123</span>
                <span>Artist 123</span>
                <span>Play on Spotify</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

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