带点文字链接列表, 实现的效果是, 调整字体大小, 点的位置不会跟着变动.
HTML如下:
CSS代码:
关键点:
① li的line-height:1.5; //设置为数字表示, line-height和字体尺寸做乘积, 得到的值来设置行高, 此例中font-size:14px; 行高是14px*1.5= 21px;
② .dot(点)元素: top的为0.75em; //em是一个相对大小单位, 总是继承父类中设置的字体大小, 比如这个例子中的font-size:14px;所以这里的0.75em的top值就是10.5px;
观察①和②:
发现.dot元素的top值始终是在li的中间, 而dot自身也有大小: border:2px solid;(颜色继承父级)所以.dot元素的margin-top向上设置了-3px(四舍五入)就是这么来的.