如何制作带编号的段落(HTML5 / CSS3)

时间:2014-08-21 10:18:55

标签: html css html5 css3

我正在使用HTML5中的QuickBASIC 4.5指南,我已经开始使用它了,但我想知道如何编号(或停止文本换行)我的行码。现在,我的代码如下所示:

1. PRINT "Hello World!"
2. INPUT "Who are you? ", myName$
3. PRINT "Hello, " + myName$
4-7. (Stuff)
8. PRINT "Did you know that " + STR$(num1%) + " + " + STR$(num2%) + " = " + STR(total%) + "?"

所以你看到当你在那里滚动代码时,它会给出一个滚动条?我想拥有它,但我也需要知道如何自动编号...现在它在我的< p>' s ..看:

<p class="code">1. PRINT "Hello World!" <br />
2. INPUT "Who are you? ", myName$ <br />
(...)</p>

我希望能够做一些事情,也许在CSS部分,它提供滚动,最好是数字。如果你能解决其中任何一个问题,那就告诉我..我也看了CSS3,看到文本包装属性还没有在任何主流浏览器上使用,所以也许我不能做到这一点,但再次滚动只会有助于此。 :P


如果有人想知道,这里是代码类的CSS代码:

 .code {
    font-family: Courier;
    margin-left: 35px;
    margin-right: 35px;
    background: #F0EFE9;
    border-style: inset;
    border-width: 5px;
    resize: vertical;
    overflow: auto;
    cursor: context-menu;
    /*text-wrap: none;*/ /* This doesn't work.. */

3 个答案:

答案 0 :(得分:5)

<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>

<style type="text/css">
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}
</style>

答案 1 :(得分:3)

<ol>元素将起作用而不是网址。默认情况下,<ol>会将列表项的编号显示为<ul>元素等的姿势

<ol>
<li> PRINT "Hello World!" </li>
<li>INPUT "Who are you? ", myName</li>
</ol>

答案 2 :(得分:1)

您可以使用有序列表执行此操作。

请参阅此链接http://www.w3schools.com/html/html_lists.asp

<ol> <li><p>hello world </p></li> </ol>