当前位置: 代码迷 >> Web前端 >> ul、li默许margin、padding深入研究
  详细解决方案

ul、li默许margin、padding深入研究

热度:83   发布时间:2012-11-12 12:31:58.0
ul、li默认margin、padding深入研究

废话不多说先上代码和最终效果图。

代码:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ul\li默认margin\padding测试</title>
<style>
	html{overflow:auto}
	body{font:12px Arial, Helvetica, sans-serif;background:#FFF}
	body,h1,h2,h3,h4,h5,h6,p{margin:0;}
	ul{margin-top:0;margin-bottom:0;padding-left:0;*margin-left:0;}
	li{list-style:none}
	.u_a li{background:url(images/li_dot.gif) no-repeat;padding-left:15px;line-height:25px;_width:95%;font-size:14px;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
	.u_a li a{color:#333; text-decoration:none}
	.u_a li a:hover{color:#333; text-decoration:underline}
	.d_a{width:450px;margin:50px auto 0;border:1px solid #CCC;_overflow:hidden}
	.h_a{font-size:14px;margin:0 5px;padding:0 5px; border-bottom:1px dashed #CCC;line-height:25px;}
</style>
</head>

<body>
	<div class="d_a">
        <h2 class="h_a">ul、li深入研究</h2>
        <ul class="u_a">
        	<li><a href="#">我是第一条列表信息,叫我小小小小小小小小小小小小小小小小小小小小小小小</a></li>
            <li><a href="#">我是第二条列表信息,叫我小小小zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
            <li><a href="#">测试证明ul有默认margin-top,margin-bottom</a></li>
            <li><a href="#">测试证明ul在IE6\7浏览器中有默认margin-left,无padding-left</a></li>
            <li><a href="#">测试证明ul在非IE6\7浏览器中有默认padding-left,无margin-left</a></li>
            <li><a href="#">测试证明li无默认margin\padding</a></li>
            <li><a href="#">测试证明li在IE6中不设宽度,“text-overflow”无效</a></li>
            <li><a href="#">line-height设置之后无需再加height</a></li>
        </ul>
    </div>
</body>
</html>

?效果图:

(一)、测试ul的margin-top、margin-bottom:

ul{margin-top:0;margin-bottom:0;padding-left:0;*margin-left:0;}

把以上代码中的margin-top、margin-bottom删掉,结果看图:

?

?

剩下的margin-left、padding-left这里就不再上图了。

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?