0

1.写了一个ol,但是它前面的序号并不在宽度范围里面,是怎么回事呢?
截图:

2.代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 500px;
                margin: 50px auto;
                background-color: red;
            }
            ol{
                width: 400px;
                margin: 0 auto;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ol>
                <li>cccccccccccccccccc</li>
                <li>ddddddddddddddddddd</li>
                <li>ddddddddddddddd</li>
                <li>fffffffffffffffffffffffffff</li>
                <li>hhhhhhhhhhhhhhhhhhhhhhhhhhh</li>
            </ol>
        </div>
    </body>
</html>

查看全部 2 个回答

3

已采纳

序号的显示位置是由list-style-position属性决定的,默认效果是outside,也就是显示在内容的外边,你可以设置list-style-position: inside;使序号在内容里面显示,效果如下图所示: