需要在列表编号中右对齐而不使用ol标签

Question

我有一个正常的段落:

HTML:

<p><span>[1]</span> list-type-1</p>
<p><span>[2]</span> list-type-2</p>
...
<p><span>[10]</span> list-type-3</p>

CSS:

span {
  text-align:right;
}

需要输出:

 [1] list-type-1
 [2] list-type-2
....
[10] list-type-10

但是列表号放在左边。那么，如何修正右对齐呢?

提前感谢。

Answer 1

设置span的宽度

span {
    text-align:right;
    display:inline-block;
    width:30px;
}   

http://jsfiddle.net/hedgehog34/50tp475k/

Answer 2

像这样修改你的css

span {
    text-align:right;
    float:right;   // This style is responsible to put your list numbers on right side in your case
}

参见:https://jsfiddle.net/5mmgu9dk/

Answer 3

alternative

p{
    padding-left: 35px;
    position: relative;
}
span {
    text-align: right;
    position: absolute; top: 0; left: 0;
    width: 30px;
}

<p><span>[1]</span> list-type-1</p>
<p><span>[2]</span> list-type-2</p>
<p><span>[23]</span> list-type-23</p>
<p><span>[10]</span> list-type-3</p>