通過最後一位數字定位列表項目數量...？

Question

我有一個動態生成的有序列表，最多105個項目。我正在用li來設計li號碼：之前，一切都很順利，但是一旦列表達到三位數，這些號碼就會與列表項重疊。這掩蓋了李本身的數量和部分的結束。我想要做的是讓李的數字與最後一位數字對齊，而不是第一位數字。我不確定如何問這個問題，這可能是爲什麼我無法找到答案。下面的例子：

如何列表項的數字似乎在默認情況下顯示：

1. 
5. 
10. 
50. 
100. 

我想要實現：

1. 
    5. 
10. 
50. 
100. 

我已經試驗了一下與添加

direction: rtl 

and

text-align-last: right 

給李先生：以前，但似乎都沒有做任何事情。

感謝您的幫助，對不起，如果這是一個愚蠢的問題！

編輯：這是我的CSS。謝謝！

li:before { 
    text-shadow: 2px 2px 4px #000000; 
    margin-left:-20px; 
    margin-top:25px; 
    content: counter(item); 
    color: white; 
    display: inline-block; 
    font-size:2rem; 
    direction: rtl; 
    text-align-last: right; 
} 

Answer 1

你可以發佈更多的HTML和CSS，因此我們可以準確理解你當前正在做什麼。

默認情況下，有序列表將右對齊項目編號。我所取得的成就，我認爲你是這個後：

ol li { 
 
    /* Style the list number */ 
 
    color: red; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 
ol li span { 
 
    /* Style the list item text */ 
 
    color: green; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
}

<ol> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
</ol>