Question

我使用list-items获得的结果是：

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。

（注意文字在数字下面）

但我希望在这些数字下有一个空间怎么能实现呢？像这样的东西

Pellentesque sed placerat nunc。 Maecenasas。 Vam tempus tincidnisl。 Nullam imperdiet convallis mauris，et dictum nibh cursus sed。整数feugiat augue坐在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

你可以使用css。

li
{
   margin-left:15px;  
}

Answer 2

为$('body').append('<div id="deposit"></div>');添加负边距。

＆＃13;

:before

＆＃13;

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

＆＃13;

Answer 3

您可以使用包含两列的表（适用于所有浏览器）：

<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

添加此样式：

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

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

这是一个小提琴：http://jsfiddle.net/dndrtqo0/3/

如何排列<ol>列表项？

4 个答案: