纯css实现刻度尺列表样式

最新推荐文章于 2025-05-19 16:01:57 发布

涛锅

最新推荐文章于 2025-05-19 16:01:57 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq807081817/article/details/43982741

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文展示了如何利用CSS实现创意的刻度尺列表样式。通过设置li元素的固定大小并巧妙运用border，可以形成刻度效果。内容部分强调了将li内容绝对定位以脱离li的布局限制，从而达成设计目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看看效果图

其实这个刻度尺就是用border实现的

通过将li设置为固定大小，只显示部分border即可达到效果

同时li的内容要设置绝对定位，脱离li的限制

然后看看html内容

<body>
    <ul>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
    </ul>
</body>

就是一个很简单的列表，那么我们来看看样式是怎么写的

<style>
    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

        ul > li {
            position: relative;
            width: 10px;
            height: 20px;
            border-bottom: 1px solid gray;
            border-left: 1px solid transparent;
        }

            ul > li + li {
                border-left-color: gray;
            }

            ul > li > a {
                display: block;
                position: absolute;
                height: 20px;
                line-height: 20px;
                margin-left: 20px;
                margin-top: 10px;
            }
</style>