列表项对齐不正常

Question

我有一些带有li的ul，我希望结果是这样的：

  I. List element 1
 II. List element 2
III. List element 3
 IV. List element 4
  V. List element 5

但我得到了这个结果：

I. List element 1
II. List element 2
III. List element 3
IV. List element 4
V. List element 5

这是我的代码：link

Answer 1

你应该用这个：

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

Answer 2

方法1

将<ul>...</ul>更改为<ol type="I">...</ol> - ol是一个有序列表，I means uppercase roman numerals，已经完全符合您的需要。

方法2

将<ul>...</ul>更改为<ol>...</ol>，但在CSS中指定大写罗马数字而不是HTML：

ol {
    list-style-type: upper-roman;
}

方法3

方法1和2是最好的 - 正如您所看到的那样，它们可以节省大量的自定义span，而<ul>应该仅用于订单无关的列表。如果您确实需要在问题中使用<ul>，请将display: inline-block;添加到span s（否则不能给他们宽度），然后添加list-style-type: none到ul和li s，隐藏项目符号点（您可能还想删除li左边距）。

---

所有3种方法都可以看作in this JSFiddle。

Answer 3

不需要span标签。你可以这样做..

<ol type="I">
   <li>Item desc</li>
   <li>Item desc</li>
   <li>Item desc</li>
   <li>Item desc</li>
   <li>Item desc</li>
</ol>

<强>样本：

http://jsfiddle.net/1L0wdggL/1/

-OR

 <ol>
    <li> Item desc</li>
    <li> Item desc</li>
    <li> Item desc</li>
    <li>Item desc</li>
    <li> Item desc</li>
</ol>

li {
    list-style-type: upper-roman;
}

<强>演示：

http://jsfiddle.net/1L0wdggL/2/

Answer 4

添加此CSS

li {
display:flex;
}

Answer 5

只需将所有ul代码更改为ol并删除代码。

你需要添加类似ol的类型：

<ol Type="I">

您可以将以下类型用于有序列表：

Type="i"
Type="a"
Type="A"