.run-time-container { text-align: center; padding: 6px 0; font-size: 12px; color: #666; background: #f5f5f5; margin: 0 auto; width: 100%; clear: both; line-height: 30px; /* 核心：固定行高，强制一行 */ white-space: nowrap; /* 禁止换行 */ } .run-time-title { margin-right: 6px; color: #666; font-size: 12px; display: inline-block; /* 确保和翻牌在同一行 */ vertical-align: middle; /* 垂直居中对齐 */ } .flip-card-group { display: inline-flex; align-items: center; /* 翻牌内部垂直居中 */ gap: 2px; vertical-align: middle; /* 和标题垂直居中对齐 */ } .flip-card { position: relative; width: 20px; height: 30px; line-height: 30px; /* 行高=高度，数字垂直居中 */ text-align: center; font-size: 14px; font-weight: bold; color: #333; background: #fff; border: 1px solid #eee; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03); display: inline-block; /* 确保行内显示 */ } .flip-card .num { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.3s ease-in-out; line-height: 30px; /* 数字行高同步 */ } .flip-unit { margin: 0 4px 0 1px; font-size: 12px; color: #888; display: inline-block; /* 单位行内显示 */ vertical-align: middle; /* 垂直居中 */ } /* 移动端适配 */ @media (max-width: 768px) { .flip-card { width: 18px; height: 26px; line-height: 26px; font-size: 12px; } .run-time-container { font-size: 11px; padding: 4px 0; line-height: 26px; /* 移动端行高同步 */ } .flip-unit { margin: 0 3px 0 1px; } } /* 强制兼容模板样式，避免错位 */ .run-time-container * { box-sizing: border-box; margin: 0; padding: 0; float: none !important; /* 禁止模板自带的浮动样式 */ }