关于html:如何排列
    列表项?

How to line up

    list items?


我的1个清单项目得到的结果是:
<铅>


1 Sed等。 Aliqtae convallis lacus,nec mollis metus Sed congue。 环境,还可以运行。 Enim veuicula augue坐在amet eros volutpat ligula,id vulputate利奥拉西尼亚。
<铅>


(注意文本在数字下方)
<铅>


1但要那些数字下的空间怎么能做到? 像这样的东西
<铅>

  • 桑德现在投资。 催乳剂。 季铁尼西尔的夏季。 资助接力山谷环境,但也要运转。 Enim veuicula augue坐在amet eros volutpat ligula,id vulputate利奥拉西尼亚。

  • http://jsfiddle.net/dndrtqo0/
    <铅>

    1
    2
    3
    4
    5
    6
    7
    8
    <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>


    将负边距添加到:before

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    <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>


    您可以为此使用css。

    1
    2
    3
    4
    li
    {
       margin-left:15px;  
    }

    添加此样式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ol li {
        position: relative;
        margin-left: 50px;
    }

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

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


    您可以使用具有两列的表(在所有浏览器中都适用):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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>