itRef.cn技术参考网站

当前位置: 主页 > CSS >

li与div的区别

时间:2010-05-27 15:41来源:未知 作者:adm_ref 点击:
测试HTML结构: div id = box class = box ul li a href = # 这是第一行 / a / li li a href = # 这是第二行 / a / li li a href = # 这是第三行 / a / li li a href = # 这是第四行 / a / li / ul / div br / div id = box class = box div class = item a

测试HTML结构:

  1. <div id="box" class="box"> 
  2. <ul> 
  3.     <li><a href="#">这是第一行</a></li> 
  4.     <li><a href="#">这是第二行</a></li> 
  5.     <li><a href="#">这是第三行</a></li> 
  6.     <li><a href="#">这是第四行</a></li> 
  7. </ul> 
  8. </div> 
  9. <br /> 
  10. <div id="box" class="box"> 
  11. <div class="item"><a href="#">这是第一行</a></div> 
  12. <div class="item"><a href="#">这是第二行</a></div> 
  13. <div class="item"><a href="#">这是第三行</a></div> 
  14. <div class="item"><a href="#">这是第四行</a></div> 
  15. </div> 

测试的样式:

  1. *{margin:0;padding:0;}  
  2. body{margin:20px;}  
  3. .box{width:400px;padding:10px;border:1px solid #FF0000;}  
  4. li{border:1px solid #0000FF;list-style:none;}  
  5. div.item{border:1px solid #FF6600;} 

IE6-8、FF都显示为


当增加a浮动的样式后
 
  1. *{margin:0;padding:0;}  
  2. body{margin:20px;}  
  3. .box{width:400px;padding:10px;border:1px solid #FF0000;}  
  4. li{border:1px solid #0000FF;list-style:none;}  
  5. div.item{border:1px solid #FF6600;}  
  6. a{background-color:#00FF00;float:left;} 

 IE8、FF显示:


IE6、IE7显示:

 

(责任编辑:wiwi) 转载请注明 来源于itRef.cn技术参考网站:
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容