如何制作带编号的段落(HTML5 / CSS3) [英] How do I make numbered paragraphs (HTML5/CSS3)
问题描述
我正在研究HTML5中的QuickBASIC 4.5指南,并且已经使它工作了很多,但是我想知道如何为我的代码行编号(或停止文本包装)。现在,我的代码看起来像这样:
I'm working on a QuickBASIC 4.5 guide in HTML5, and I've been getting a bunch of it working, but I want to know how I can number (or stop text-wrapping) my lines of code. For now, my code looks like this:
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>的外观:
So you see how when you scroll over the code there, it gives a scroller? I want to have that, but also I need to know how to make the numbering automatic.. right now it's in my < p >'s.. look:
<p class="code">1. PRINT "Hello World!" <br />
2. INPUT "Who are you? ", myName$ <br />
(...)</p>
我希望能够做一些事情,也许在CSS部分,它可以滚动,最好是数字。如果您能解决任何一个问题,请告诉我。.我还查看了CSS3,发现没有在任何主流浏览器上使用text-wrap属性(尚未),所以也许我不能这样做,但是然后再次滚动将对此有所帮助。 :P
I want to be able to do something, maybe in the CSS section, that gives scrolling and preferably the numbers. If you can get either one solved, just tell me.. I also looked on CSS3 and saw that the text-wrap property isn't used on any of the major browsers (yet), so maybe I can't do that, but then again the scrolling would just help with that. :P
只要有人想知道,这就是代码类的CSS代码:
Just if anybody wants to know, here's the CSS code for the code class:
.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.. */
推荐答案
< ol>
元素将代替网址起作用。默认情况下,< ol>
显示列表项的编号作为< ul>
元素的构成等等
an <ol>
element will work instead of a url. By default an <ol>
shows the numbers of the list items as a pose to the <ul>
element etc
<ol>
<li> PRINT "Hello World!" </li>
<li>INPUT "Who are you? ", myName</li>
</ol>
这篇关于如何制作带编号的段落(HTML5 / CSS3)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!