如何在html中用css降低羅馬有序列表樣式？

Question

像下面的示例圖像那樣簡單的工作，證明是非常困難的。我的沮喪來自於這樣的事實：經過這麼多年，這仍然不可能輕鬆使用html/css，這正是我想要的！ 我想要一個有顏色的羅馬式子彈的有序列表！正如下面的例子一樣，將文本整齊地放在一起。我已經嘗試了許多努力與小提琴，但我不能讓它看起來像我下面的圖像整潔。任何線索如何改善這一點？

ol{ 
counter-reset:item; 
list-style:none; 
} 
ol li:before{ 
content: counter(item, lower-roman) "."; color: #4000ff; 
counter-increment: item; 
position: absolute; 
text-align: right; 
padding-right: 4px; 


}ol li{ 
text-indent: -20px; 
margin: 4px 0 0 17px; 
} 

http://jsfiddle.net/MEBxA/89/

PS雖然我寫在InDesign一些ABCD佔位符文本，突然我的想象起飛...

---

---

請告訴我需要：

1. 實現羅馬字母和李文之間的適當差距。成功！
2. 添加羅馬字母的左對齊或右對齊
3. 讓下一行適合整齊排列。成功！

Answer 1

我希望我理解正確。你已經有了列表類型的顏色，所以唯一的問題是對齊？

滴在li的text-indent和左邊距，並添加負margin-right到li:before：

ol li:before{ 
content: counter(item, lower-roman) "."; 
color: #4000ff; 
counter-increment: item; 
position: absolute; 
text-align: right; 
margin-left: -30px; 
} 
ol li{ 

margin: 4px 0 0 0; 
} 

Updated Fiddle