[颤动]列表中的数字宽度不等，看起来很难看

基础概念

列表中的数字宽度不等通常是因为数字的位数不同，导致显示时占用的空间不一致。这种情况在前端开发中比较常见，尤其是在处理表格或列表数据时。

类型

固定宽度：通过CSS设置固定宽度，确保所有数字占用的空间一致。
动态宽度：根据数字的最大位数动态调整宽度，但这种方法可能会导致一些列过宽或过窄。

应用场景

数据表格：在数据表格中，统一数字宽度可以使表格看起来更整洁。
列表展示：在商品列表、订单列表等场景中，统一数字宽度可以提高用户体验。

问题原因

数字宽度不等的原因通常是因为：

数字位数不同：不同数字的位数不同，导致显示时占用的空间不一致。
CSS样式未设置：没有通过CSS设置统一的宽度。

解决方法

可以通过CSS来解决这个问题，以下是几种常见的方法：

方法一：使用固定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Width Example</title>
    <style>
        .number {
            width: 50px; /* 设置固定宽度 */
            text-align: right; /* 右对齐 */
        }
    </style>
</head>
<body>
    <ul>
        <li class="number">1</li>
        <li class="number">123</li>
        <li class="number">4567</li>
    </ul>
</body>
</html>

方法二：使用CSS Grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <style>
        ul {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
            gap: 5px;
        }
        li {
            text-align: right;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>123</li>
        <li>4567</li>
    </ul>
</body>
</html>

方法三：使用JavaScript动态计算宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Width Example</title>
    <style>
        li {
            text-align: right;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>123</li>
        <li>4567</li>
    </ul>
    <script>
        const list = document.getElementById('list');
        const items = list.getElementsByTagName('li');
        let maxWidth = 0;

        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            const width = getTextWidth(item.innerText, '16px Arial');
            if (width > maxWidth) {
                maxWidth = width;
            }
        }

        for (let i = 0; i < items.length; i++) {
            items[i].style.width = `${maxWidth + 10}px`; // 增加一些padding
        }

        function getTextWidth(text, font) {
            const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
            const context = canvas.getContext('2d');
            context.font = font;
            const metrics = context.measureText(text);
            return metrics.width;
        }
    </script>
</body>
</html>