如何排队 <ol> 列出项目？

Question

The result I got with my list-items is this :

1 Pellentesque sed tristique. Aliqtae convallis lacus, nec mollis metus. mauris, et dictum nibh cursus sed. Integer feugiat augue sit amet enim vehicula, id vulputate leo lacinia.

(notice the text goes under the numbers)

But I want a space under those numbers how can accomplish that ? something like this

1. Pellentesque sed placerat nunc. Maecenasas. Vam tempus tincidnisl. Nullam imperdiet convallis mauris, et dictum nibh cursus sed. Integer feugiat augue sit amet enim vehicula, id vulputate leo lacinia.

http://jsfiddle.net/dndrtqo0/

<ol>
    <li> Pellentesque sed placerat nunc. Maecenas dignissim nec sapien sed ultricies. Nullam faucibus dolor nec enim scelerisque tristique. Aliqtae coleo lacinia. </li>
    <li> Pellentesque sed placerat nunc. Maecenasas. Vam tempus tincidunt lobortis nec quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus nec dolor semper, lacinia justo nec, pellentesque nisl. Nullam imperdiet convallis mauris, et dictum nibh cursus sed. Integer feugiat augue sit amet enim vehicula, id vulputate leo lacinia. </li>
</ol>

Answer 1

You can use css for this.

li
{
   margin-left:15px;  
}

Answer 2

Add negative margin to the :before .

 ol {list-style: none; margin-left: 30px; } ol li:before { width: 50px; margin-right: 10px; content: counter(item); text-align: center; background: red; display: inline-block; margin-left: -65px; } ol li { margin-bottom: 30px; counter-increment: item; } 

 <ol> <li> Pellentesque sed placerat nunc. Maecenas dignissim nec sapien sed ultricies. Nullam faucibus dolor nec enim scelerisque tristique. Aliqtae convallis lacus, nec mollis metus. mauris, et dictum nibh cursus sed. Integer feugiat augue sit amet enim vehicula, id vulputate leo lacinia. </li> <li> Pellentesque sed placerat nunc. Maecenasas. Vam tempus tincidunt lobortis nec quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus nec dolor semper, lacinia justo nec, pellentesque nisl. Nullam imperdiet convallis mauris, et dictum nibh cursus sed. Integer feugiat augue sit amet enim vehicula, id vulputate leo lacinia. </li> </ol> 

Answer 3

You could use a table with two columns (works in all browsers):

<table>
   <tr>
       <td>1.</td>
       <td>Pellentesque sed tristique. Aliqtae convallis lacus, nec mollis metus. mauris, et dictum nibh cursus sed. Integer feugiat augue sit amet enim vehicula, id vulputate leo lacinia.</td> 
   </tr>
   <tr>
       <td>2.</td>
       <td>Other stuff</td> 
   </tr>
</table>

Answer 4

Add this style:

ol li {
    position: relative;
    margin-left: 50px;
}

ol li:before {
    position: absolute;
    top: 1px;
    left: -60px;
}

Here is a fiddle for it: http://jsfiddle.net/dndrtqo0/3/