如何让单个数字对齐至第二位（不显示前导零）？

问题描述 #

需要让单个数字（如1）对齐到双位数的第二个数字位置（视觉效果类似01但仅显示1），当前双位数布局符合预期，但设置text-align:right会破坏原有布局，求可行方案。

解决方案 #

核心思路是给数字容器设置固定宽度，并让内部内容靠右对齐，确保单数字和双数字都能在固定宽度内保持对齐，同时不影响整体flex布局。

修改后的.number CSS样式

.number {
    font-size: 4rem;
    font-family: 'Styrene Bold';
    margin-right: 0.5rem;
    width: 6rem; /* 固定宽度，确保能容纳两位目标字体的数字 */
    display: flex;
    justify-content: flex-end; /* 内部内容靠右对齐 */
    align-items: flex-end; /* 和单位文字保持底部对齐 */
}

或者也可以用text-align:right实现，效果一致：

.number {
    font-size: 4rem;
    font-family: 'Styrene Bold';
    margin-right: 0.5rem;
    width: 6rem; /* 替换原min-width为固定width */
    text-align: right;
}

效果说明

• 单数字（如1）会在固定宽度容器内靠右显示，视觉上等同于占据双位数的右侧位置；
• 双数字（如20）会填满固定宽度容器，保持原有布局位置不变；
• 固定宽度6rem需根据你的字体实际大小调整，确保能容纳两位数字即可。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @font-face {
            font-family: 'Styrene Black';
            src: url('StyreneAWeb-Black.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Bold';
            src: url('StyreneAWeb-Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Medium';
            src: url('StyreneAWeb-Medium.ttf') format('truetype');
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Styrene Bold', Arial, sans-serif;
            color: white;
        }

        .container {
            background: url('pozadi2.png') no-repeat center center;
            background-size: cover;
            padding-left: 4rem;
            padding-top: 3rem;
            width: 1296px;
            height: 768px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            text-align: left;
        }


        .heading {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-bottom: 1rem;
        }

        .time-container {
            display: flex;
            align-items: flex-end;
            margin-bottom: 0rem;
        }

        .number {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-right: 0.5rem;
            width: 6rem;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .unit {
            font-size: 4rem;
            font-family: 'Styrene Medium';
            margin-right: 1.5rem;
        }

        .note {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 0.5rem;
            color: #233254;
            line-height: 1.5;
        }

        .note2 {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 2rem;
            color: #233254;
            line-height: 1.5;
        }

        .text-black {
            color: #233254;
            font-family: 'Styrene Black';
        }

        .note-container {
            margin-top: auto;
        }
    </style>
    <title>Title</title>
</head>
<div class="container" id="timer-container">
    <div id="month-display" class="heading"></div>

    <div class="time-container" id="days-container">
        <div id="days" class="number">1</div>
        <div id="days-unit" class="unit">den</div>
    </div>
    <div class="time-container" id="hours-container">
        <div id="hours" class="number">20</div>
        <div id="hours-unit" class="unit">hodin</div>
    </div>
    <div class="time-container" id="minutes-container">
        <div id="minutes" class="number">12</div>
        <div id="minutes-unit" class="unit">minut</div>
    </div>
    <div class="time-container" id="seconds-container">
        <div id="seconds" class="number">22</div>
        <div id="seconds-unit" class="unit">vteřin</div>
    </div>
</div>
</html>

预览效果 #

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