`
mywang.bo
  • 浏览: 454701 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

float:center 能出现这样的效果吗

阅读更多
对于ul li 列表 需要水平居中 通常要做很多工作,比如定义宽度的,内外边距之类,有没有直接就可以出现flaot:center效果呢? 没有做不到的事情,只有暂时还想不到的! 查看下面代码吧     跨浏览器实现float:center,No CSS hacks 我是居中的 我是居中的 我是居中的 我是居中的 我是居中的 我是居中的 我是居中的 我是居中的 我是居中的
分享到:
评论

相关推荐

    让横向排列的几个浮动(float:left)的子div居中显示

    div设置成float之后,在父div中设置text-align:center,就无法使子div居中显示了,不过我们可以使用变通的方法达到这一效果,就是在父div上再套一个div,如下: 复制代码代码如下: ”outerdiv” xss=removed> ”...

    网站banner图轮播效果 js

    float:right;} .sub_no li{display:block; width:25px; height:25px; float:left; overflow:hidden; line-height:25px; vertical-align:middle; text-align:center; background:#000000; filter:alpha(Opacity=70);...

    通过定位来实现不定宽度居中显示

    下面这个方法是通过定位来实现的效果: CSS代码: 复制代码代码如下: <style> *{ padding:0; margin:0; list-style:none;} .sjbest ul { float:left; position:relative; left:50%;} .sjbest ul li { float:...

    DIV层之拖动、关闭、打开效果代码

    div托动,打开,关闭效果 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-...

    JavaScript实现分页效果

    效果图: 代码如下: <html> <head> <style> *{padding:0;margin:0} ul,li{list-style:none} .left{float:left} .right{float:left} .page_container{height: 30px; line-height: 30px;...

    背景半透明效果CSS链接样式代码

    一、背景半透明效果 复制代码代码如下:a.menu_a_2,a.menu_a_2:link,a.menu_a_2:visited { display:block; width:75px; height:35px; float:left; line-height:35px; text-align:center; color:#FFFFFF; font-weight:...

    基于JavaScript实现淘宝商品广告效果

    本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下 CSS部分: ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px...

    javascript实现动态显示颜色块的报表效果

    <style type="text/css"> *{ padding: 0; margin: 0; ... .tubiao,.jihua,.shiji,.riqi{ ... text-align: center; height: 25px; line-height: 25px; } .right{ width: 90%; float: right; height: 2

    css 有弹动效果的网页导航

    这是一个导航 #nav{ list-style:none; margin:0; padding:5px 0 0 0;...text-align:center; background:url(//www.jb51.net/upload/20091011190507833.gif) no-repeat 0 -4px #F3602A; font:12px/2

    JS打开层/关闭层/移动层动画效果的实例代码

    css 代码如下:body, span, div, td { font-size:12px; line-height:1.5em;... text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decor

    jquery 简单的图片展示效果

    jquery练习——简单的图片结果展示效果–cnblogs libsource/ #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px...

    CSS实现同一背景图的导航菜单

    css实现导航菜单带背景图效果,sky整理收集。 ul,li{ list-style:none; float:left;} body{ font-size:12px; line-height:1.6; font-family:Verdana, “宋体”, Arial; text-align:center;} #info li{ margin-left:...

    js实现的美女瀑布流效果代码

    瀑布流以及回顶部的效果 *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; width:225...

    jQuery+CSS实现的标签页效果示例【测试可用】

    本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考,具体如下: CSS代码: #tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20...

    翻页效果,鼠标悬停的时候放大

    悬停放大的翻页效果 a { display:block; width:100px; height:30px; line-height:30px; text-align:center; overflow:hidden; } a:hover { background:#ddd; } #nav { list-style: none; display: inline;...

    仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

    仿3721首页模块拖曳移动效果[拖曳层移动层]呵,做了一些细致的处理 html, body { width:100%; height:100%; padding:0px; margin:0px; } body { text-align:center; font-size:14px; } .cell_left, .cell_...

    javascript动画效果打开/关闭层

    js_打开层关闭层效果_软件开发网 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:...

    js模拟电脑选择多文件夹效果_选区代码

    按住鼠标键不动,拖动鼠标,会看到效果 body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:...

    巧用隐藏和负边距实现兼容所有浏览器的ul和li并列效果

    最终效果图如下: (我写两个ul的原因是li只有一排和多排效果会不一样) 首先看我的写法,HTML很简单,就不贴了,只贴CSS代码,DEMO: ul{overflow:hidden;zoom:1;background:#ddd;width:440px;margin-bottom:50px;...

    js加入购物车抛物线动画与购物车效果特效

    js加入购物车抛物线动画与购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入...

Global site tag (gtag.js) - Google Analytics