Question

我正在尝试创建一个列表，其中罗马数字直接出现在文本上方，即看起来像这样：

                                         I.
                                    Text Text Text

这是我尝试的代码，但我认为对齐是整齐列表而不是罗马数字。

<ol type="I">
<li>To be respected for our occupational and educational choices</li>
<br>
<li>To meet occupational standards set by employers and to be proficient in workplace basics</li>
<br>
<li>To receive a world class education</li>
<br>
<li>To earn credentials and degrees which qualify us for further education and work</li>
<br>
<li>To receive guidance that fits our interests and aptitudes</li>
<br>
<li>To work in the occupations for which we have trained</li>
<br>
<li>To study in safe and stimulating schools</li>
<br>
<li>To serve our communities</li>
<br>
<li>To learn from competent instructors committed to the success of their students</li>
<br>
<li>To meet face0to-face with business,industry, and organized Labor</li>
</ol>

Answer 1

您可以使用CSS2 counters。

jsFiddle Demo

ol {
    counter-reset: my-counter;
    list-style-type: none;
}

ol li {
    text-align: center;
}

ol li:before {
    content: counter(my-counter, upper-roman) ".";
    counter-increment: my-counter;
    display: block;
}

进一步阅读：Numbering in style

另一种方法是在每个列表项的开头创建换行符。这有一些浏览器支持问题（仅适用于FF但可能还有一些额外的工作，你可以解决这个问题）。

jsFiddle Demo

ol li:before {
     content :"\A"; 
     white-space: pre; 
}

Answer 2

我认为这会有效（fiddle）

CSS：

li {
    text-align: center;
}

HTML：

<ol type="I">
<li><br>To be respected for our occupational and educational choices</li>
<br>
<li><br>To meet occupational standards set by employers and to be proficient in workplace basics</li>
<br>
<li><br>To receive a world class education</li>
<br>
<li><br>To earn credentials and degrees which qualify us for further education and work</li>
<br>
<li><br>To receive guidance that fits our interests and aptitudes</li>
<br>
<li><br>To work in the occupations for which we have trained</li>
<br>
<li><br>To study in safe and stimulating schools</li>
<br>
<li><br>To serve our communities</li>
<br>
<li><br>To learn from competent instructors committed to the success of their students</li>
<br>
<li><br>To meet face0to-face with business,industry, and organized Labor</li>
</ol>

如果您希望它特定于此列表，请在CSS中为li创建一个类。另外，我将原来的间隔留给了间距，但我会删除它们并在CSS中使用填充或边距。

如何将罗马数字置于列表项之上

2 个答案: