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:1;}.m-list2 li .dot{position:absolute;top:0.75em;left:0;width:0;height:0;overflow:hidden;border:2px solid;margin-top:-3px;}
</style>

關鍵點:

① 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(四舍五入)就是這么來的.

?