4

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

                                         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>
4

2 回答 2

3

您可以使用CSS2 计数器。

jsFiddle 演示

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;
}

进一步阅读：风格编号

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

jsFiddle 演示

ol li:before {
     content :"\A"; 
     white-space: pre; 
}
于 2013-09-14T18:36:07.853 回答
0

我认为这会起作用（小提琴）

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>

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

于 2013-09-14T18:37:16.337 回答