废话不多说先上代码和最终效果图。
代码:
<!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这里就不再上图了。
分享到:
相关推荐
大家都知道 ul 默认值中,IE 给了 ul 一个 margin 值,而 FF 给了一个 padding 值。
menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:150px; height:30px; text-align:center; color:#fff; border-bottom:1px solid #FFF; background:#0069A3; line-...
如下所示: ul,li{margin:0;padding;0}放在css的第一行。 注意CSS的设置中ul和li之间要用逗号 以上就是小编为大家带来的修改UL和LI间隔的简单方法的全部内容了,希望对大家有所帮助,多多支持软件开发网~
不知道大家知道这个问题不,在ie6的情况。假如ul中的li被设置了浮动,而ul本身有设置padding-top.你会发现li无端端多出了根ul的padding-top一样宽的margin-top(在浮动的li元素的数目已使分行的时候出现)。
.menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:...
nav ul li:hover ul { display: block; /*鼠标放上去,显示下拉菜单*/ } nav a:link, a:visited { /*定义菜单项样式*/ width: 191px; display: block; padding: 10px 0; text-decoration: none; ...
#header ul li a:hover { color:red; } #max { width:760px; height:500px; } #sar { width:203px; height:344px; float:left; } #sar dl { width:160px; height:138px; float:left; padding:20px 20px...
#ul1 li{width:90px;color:white;float:left;margin-left:15px;margin-top:20px;font-size=15px;} img{border:2px; solid gray;margin:2px;} p{line-height:22px;} ;height:100px;background-color:brown;margin-...
#logoin ul#per li{ padding-left:20px; line-height:20px; margin:0px; background:url(arrow5.gif) no-repeat 6px 5px; } #logoin #per input{ background-color:#000000; border:1px solid #c86615; color...
css样式: 代码如下: @CHARSET “UTF-8”; #div{ margin-bottom:10px; position:relative; } #div1{ width:153px; padding-top:0px; padding-left:0px; position:absolute;... } #div1 ul li input{ margin-
body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-...
要点: 块状元素前后元素会换行 行内元素前后元素不会换行 第一:行内元素与宽度 宽度不起作用 ...复制代码代码如下: <ul> <li>第一</li> <li>第一</li> <li>第一</li> </ul> 中的li在同一行显示并有上下边距呢, 如
margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } ...
#tabs ul li:hover {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;} #tabs ul li:hover > a.outer {color:#000; background-position:0 -55px; height:55px; cursor:default;...
#daohang ul li{ text-align:center; float:left; width:90px; } #daohang a{ background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0px; padding-bottom:...
.myDiv ul li{ width:100px; float:left; border-right:1px solid #000; height:30px} .myDiv1{ width:300px; border:1px solid #000;border-bottom:0; height:90px} .myDiv1 ul{ width:300px; list-style:none; ...
.produsts-page-list ul li img{ width:96%;} .produsts-page-list .hmpro-des{ display:none;} /*products1*/ #gallery{ margin:36px 8px 0 8px;} .CALLERY_CONTENT{ width:38%;} .menu1 li{ width:22%; margin-...
这是一个简单的折叠框效果... .con_ul li{ list-style: none; padding: 10px; margin: 0; border-bottom: 1px solid #CCCCCC; } .con_ul li .title{ padding-right: 20px; background-image: url(images/drop_
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body, html { font-size: 100%; height: 100%; } body { font-family:Arial, Helvetica, sans-...