基于HTML/CSS实现响应式分数板 数值紧邻进度条右侧显示

这个需求完全可以实现，你之前的问题出在将名字、进度条、分数分为了三个独立的纵向容器，导致分数位置和对应进度条的宽度无法联动。调整为按玩家为单位做行级布局即可完美满足要求。

改造思路 #

• 放弃按「名字列/进度条列/分数列」拆分容器的结构，改为每行对应一名玩家
• 每行内部从左到右依次放置：玩家名、「进度条+分数」的组合容器
• 进度条的宽度直接按与第一名的分数比例设置即可，组合容器默认占满名字外的剩余宽度，第一名的100%宽度刚好占满整行可用宽度，剩余玩家按比例缩小，分数会始终紧跟在对应进度条的右侧

完整可运行代码 #

CSS #

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
    width: 100%;
}
span {
    font-family: Arial, sans-serif;
    color: #7B7B7B;
}
/* 外层容器 */
#container {
    width: 100%;
    padding: 20px;
}
/* 单玩家行容器 */
.player-row {
    display: flex;
    align-items: center;
    height: 2em;
    margin-bottom: 10px;
}
/* 玩家名 */
.player-name {
    width: 80px; /* 可根据实际需求调整固定宽度 */
    font-weight: bold;
    line-height: 2em;
    padding-right: 2%;
}
/* 进度条+分数的组合容器 */
.bar-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px; /* 控制进度条和分数的间距 */
}
/* 进度条通用样式 */
.player-bar {
    height: 2em;
}
#player1bar {
    background-color: #4776d2;
    width: 100%;
}
#player2bar {
    background-color: #2a85b6;
    width: 50%;
}
#player3bar {
    background-color: #51636d;
    width: 7.5%;
}
/* 分数样式 */
.player-score {
    font-weight: bold;
    line-height: 2em;
}

HTML #

<body>
<div id="container">
    <!-- 玩家1行 -->
    <div class="player-row">
        <span class="player-name" id="player1name">Alice</span>
        <div class="bar-group">
            <div class="player-bar" id="player1bar"></div>
            <span class="player-score" id="player1score">10,000</span>
        </div>
    </div>
    <!-- 玩家2行 -->
    <div class="player-row">
        <span class="player-name" id="player2name">Bob</span>
        <div class="bar-group">
            <div class="player-bar" id="player2bar"></div>
            <span class="player-score" id="player2score">5,000</span>
        </div>
    </div>
    <!-- 玩家3行 -->
    <div class="player-row">
        <span class="player-name" id="player3name">Charlie</span>
        <div class="bar-group">
            <div class="player-bar" id="player3bar"></div>
            <span class="player-score" id="player3score">750</span>
        </div>
    </div>
</div>
</body>

特性说明 #

• 完全匹配你的比例要求：第一名进度条始终占满可用宽度，其余玩家按分数比例设置宽度即可
• 分数始终紧跟对应进度条右侧，布局不会错位
• 响应式适配：容器宽度变化时进度条会自动等比缩放，布局保持稳定

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