如何排列 <ol> 列表项？答案

【问题标题】：How to line up <ol> list items?如何排列 <ol> 列表项？
【发布时间】：2016-02-02 09:58:49
【问题描述】：

我的列表项得到的结果是这样的：

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

（注意文字在数字下方）

但我想在这些数字下有一个空格怎么能做到这一点？像这样的

Pellentesque sed placerat nunc。梅塞纳萨斯。 Vam tempus tincidnisl。 Nullam imperdiet convallis mauris, et dictum nibh cursus sed。整数 feugiat augue sat 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>

【问题讨论】：

删除 css 你会得到结果
数字需要背景吗？
虽然@Danish 的解决方案有效，但我想指出，在您的演示中，您使用 'li:before' 和 'counter-increment: item;'
谢谢你们，虽然所有答案都很好......我发现 afelixj 的答案最适合我

标签： html css

【解决方案1】：

您可以为此使用 css。

li
{
   margin-left:15px;  
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

添加整个表格只是为了修改一些间距似乎不是最好的解决方案。
是的，会有更好的解决方案:-)
如stackoverflow.com/questions/8283285/…

【解决方案3】：

为: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>

【讨论】：

【解决方案4】：

添加此样式：

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

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

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

【讨论】：