NEC学习 ---- 模块 - 带点文字链接列表 - 开发语言

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

带点文字链接列表, 实现的效果是, 调整字体大小, 点的位置不会跟着变动.

HTML如下:

<div class="container">

    <div class="m-list2">

        <ul>

            <li><i class="dot"></i><a href="#">带点文字链接列表，方点，颜色继承文字</a></li>

            <li><i class="dot"></i><a href="#">带点文字链接</a></li>

            <li><i class="dot"></i><a href="#">带点文字链接</a></li>

            <li><i class="dot"></i><a href="#">带点文字链接</a></li>

            <li><i class="dot"></i><a href="#">带点文字链接</a></li>

        </ul>

    </div>

</div>

CSS代码:

<style>

    .container {

        width:600px;

        margin:45px auto;

    }

    .m-list2 {

        padding-top:1px;

        font-size:14px;

    }

    .m-list2 ul{

        margin-top:-6px; // -6px 是怎么来的? 因为li的margin-top:5px, 且 .m-list2的padding-top为 1px 为了恢复到中间,ul的margin-top 正好需要设置-6px;

    }

    .m-list2 li {

        line-height:1.5;//设置数字, 此数字和当前字体尺寸相乘灵活设置行间距

        color:#777;

        position:relative;

        padding-left:10px;

        margin-top:5px;

        zoom:;

    }

    .m-list2 li .dot{

        position:absolute;

        top:0.75em;

        left:;width:;height:;

        overflow:hidden;

        border:2px solid;

        margin-top:-3px;

    }

</style>