左边带数字的ol li标签

最新推荐文章于 2021-07-21 10:32:21 发布

明知敏行

最新推荐文章于 2021-07-21 10:32:21 发布

阅读量453

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_36238674/article/details/117732596

版权

需求：左边带数字的列表
思路：

1.ol css设置属性： counter-reset: my-counter; list-style: none;
2.li css设置属性： `

        li::before {  
        content: counter(my-counter); 
        counter-increment: my-counter;
        display: block;
        float: left;`  
        }

demo代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .search_window {
            position: absolute;
            top: 53px;
            left: 0;
            width: 436px;
            height: auto;
            background-color: rgba(6, 34, 61, 0.7);
            padding: 10px 0;
        }

        ol {
            width: 100%;
            height: auto;
            counter-reset: my-counter;
            list-style: none;
        }

        li {
            width: 100%;
            height: 43px;
            line-height: 43px;
            text-align: left;
            font-size: 20px;
            color: #ddd;
            cursor: pointer;
        }

        li:hover {
            background-color: rgba(0, 156, 247, 0.5);
            color: #fff;
        }

        li::before {
            content: counter(my-counter);
            counter-increment: my-counter;
            display: block;
            float: left;
            margin-top: 10px;
            margin-left: 20px;
            width: 26px;
            height: 26px;
            background-color: #0e5b9f;
            border-radius: 13px;
            margin-right: 60px;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background-color: #0096ff;
        }

        li:nth-child(1) {
            color: #effb71;
        }
    </style>
</head>

<body>
    <div class="search_window">
        <ol>
            <li>大米</li>
            <li>二米</li>
            <li>三米</li>
            <li>四米</li>
            <li>五米</li>
            <li>六米</li>
            <li>七米</li>
        </ol>
    </div>
</body>

</html>

明知敏行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左边带数字的ol li标签

需求：左边带数字的列表思路：1.ol css设置属性： counter-reset: my-counter; list-style: none;2.li css设置属性： ` li::before { content: counter(my-counter); counter-increment: my-counter; display: block; float: left;` }de
复制链接

扫一扫