使用 row_number CSS 后为 RTL 内容添加填充答案

【问题标题】：add padding for RTL content after use row_number CSS使用 row_number CSS 后为 RTL 内容添加填充
【发布时间】：2016-08-11 16:12:17
【问题描述】：

我使用下面的 CSS 代码向表格行添加行号：

table {
    direction: rtl;
    counter-reset: line-number;
}

td:first-child {
    text-align: right !important;
}

td:first-child:before {
    content: counter(line-number) ".";
    counter-increment: line-number;
    padding-right: 0.3em;
    color: lightgray;
}

但它的内容在第十行之后没有对齐。见下图：

但我想要这样的东西：

我也尝试添加padding，但这不是一个有效的解决方案。

如何解决这个问题？

这是我现在的Fiddle。

【问题讨论】：

你在说什么？那按预期工作不是吗？由于多余的数字，数字 10 将占用比 9 更多的空间。我不确定你想表达什么。
抱歉我的英语不好。我想对齐上面的复选框（或使用行号时的其他内容）
@Ruddy 我在我的问题中添加了新图片。
我还加了小提琴：jsfiddle.net/z5mfbmhm

标签： html css css-tables css-counter cellpadding

【解决方案1】：

您可以设置min-width 的td:first-child:before。

td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}

【讨论】：

不幸的是min-width 不适合我。我还加了小提琴看看：jsfiddle.net/z5mfbmhm
使用更新后的css：min-width: 20px;display: inline-block;。

【解决方案2】：

确保将数字放入元素中，如下所示：

<input type="checkbox"> <div class="number">10</div>

然后您可以设置该元素的样式，使其具有最小宽度：

.number {
   min-width:20px;
}

这样他们就可以了，你不需要有趣的padding，这取决于号码有多少位数。

【讨论】：