li的line-height样式

html文档中常常使用ul>li列表来展示新闻列表，如下所示：

<style type="text/css">
*{ margin: 0;
padding: 0;}
a{ text-decoration: none;
color: #fff;}
li{ list-style: none;
    background: green;
    margin-bottom: 20px;
    line-height: 40px;
}


</style>


<body>

        <ul>
            <li><a href="">文章标题</a></li>
            <li><a href="">文章标题</a></li>
            <li><a href="">文章标题</a></li>
            <li><a href="">文章标题</a></li>
        </ul>

</body>

如上述代码，li的高度就会等于line-height的值。当a元素制定样式{ font-size:xxpx}之后，li的高度就会比line-height的值大1-2像素（ie6中没有变化），当列表较短时，影响不大，但是当

列表较长的时候就会有明显的影响。

解决方法: 给li添加样式{ display:block;}

posted @ 2012-10-08 22:47  游不停的鱼  阅读(317)  评论(0)  编辑  收藏  举报