首页 > 代码库 > css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
镇场诗:
清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————
code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*全局设置*/ body,ul,li,a,img{ margin:0px; padding:0px; } ul,li{ list-style:none; } a:link,a:visited{ color:blue; text-decoration:none; } a:hover{ color:red; } body{ font-size:12px; font-family:FangSong; background-color:#808080; } /*老师介绍模块*/ .teacherIntroduction{ width:420px; margin:10px auto; background-color:white; padding-top:9px; padding-left:7px; padding-bottom:5px; }/*这些数字的设定,真的需要反复的考虑,就是寻找美,在1px中!*/ .teacherIntroduction img{ width:196px; height:140px; padding:5px; border:none;/*去除边框,在火狐下没有边框,但是在IE下却有边框*/ } .teacherIntroduction li{ float:left; text-align:center; } .clear{ clear:both; } </style> </head> <body> <div class="teacherIntroduction"> <ul> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/wenshu.jpg"/></a><br/> <a href="http://www.mamicode.com/#">文殊菩萨</a> </li><!--li块元素,单独占一行--> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/puxian.jpg"/></a><br/> <a href="http://www.mamicode.com/#">普贤菩萨</a> </li> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/guanyin.jpg"/></a><br/> <a href="http://www.mamicode.com/#">观世音菩萨</a> </li> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/mile.jpg"/></a><br/> <a href="http://www.mamicode.com/#">弥勒菩萨</a> </li> </ul> <!--ul,li是一个整体,要在ul的后面加cleardiv--> <div class="clear"></div> </div> </body> </html>
result:
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。
css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。