时间戳

首页 > 解决方案 > 如何动态对齐数字和文本

html - 如何动态对齐数字和文本

问题描述

我的内容有列表，它显示如下

1 ABCD
2 ABCD
3 ABCD
4 ABCD

数字和文字可以增加到任何程度，例如

100 ABCD
1000 ABCD
9999 ABCD

但是当涉及到对齐时，文本会根据数字向前移动。但是当比较 1 和 9999 之间的对齐方式时，文本没有对齐。

我需要的是不管它是什么数字，1 到 9999 之间的文本对齐方式应该是相同的。我正在使用div标签作为数字和标题

我的数字CSS是这样的

number{width:auto;margin-right:4%;float:left;overflow:hidden}
title{width:85%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

请帮忙。

这是一个工作小提琴。

标签： htmlcss

解决方案

这可能是一个微不足道的答案，但是.. 为什么不使用表格？

<table>
    <tr>
        <td>100</td>
        <td>ABCD</td> 
    </tr>
    <tr>
        <td>99</td>
        <td>ABCD</td> 
    </tr>
</table>

编辑

另一种选择是使用弹性盒

推荐阅读