<meta name="keywords" content="华夏棋牌,css,跨浏览器,float:center" />
华夏棋牌 > web前端 > css教程 > 注释

css 跨浏览器完成float:center_履历交流

原创 2016-05-16 12:05:14 0 104
赞助会员专享特权
复制代码 代码以下:



  • 列表一

  • 列表二

  • 列表三




我们欲望完成li是浮动的,而且居中的(li个数不结实,ul宽度未知)。可以设置ul的text-align:center,再设置li的display,可以完成居中,但这样不是我们的初衷,我们须要完成float:center。

这里我们得先重温一下position:relative,它将凭证left,right,top,bottom等属性在正常文档流中偏移职位。那我们可让ul为position:relative;left:50%,然后再让li像左浮动,在让它position:relative;right:50%(或许left:-50%),那么li就像向中央浮动一样居中了。空话不多说,先尝尝。
复制代码 代码以下:

#macji{
position:relative;
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
php中文网最新课程二维码
  • 相关标签:css 跨浏览器 float:center
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 实例详解css3特效之3D翻牌效果
  • 深刻明确form表单中Readonly和Disabled的差异
  • 若何用CSS3和Js制造照顾式导航条
  • 实例详解CSS3制造文字流光突变特效
  • css 跨浏览器完成float:center_履历交流
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节