今天是:
首 页信息查询网站SEO查询工具CSS编辑器建站素材
网海拾贝,电脑资讯,电脑快报,it资讯,网站建设资讯,教程基地
软件新闻
操作系统
Vista Winxp Win2003 Linux Windows综合
工具软件
系统工具 媒体工具 网络工具 杀毒软件 聊天
软件开发
C教程 C++ Java C# ASP.NET JSP PHP
数据库
Oracle MySQL DB2 SQL Server Sybase
安全
网络 病毒
办公应用
Word Excel Powerpoint Outlook 其他
平面设计
Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax
网站运营
网站运营 网站优化 网站策划 策划书下载 建站心得 站长故事 网站盈利 网页制作 网页特效 建站素材 免费资源 QQ频道
  当前位置:首 页 >> 网页制作 >> CSS教程 >> 跨浏览器实现float:center

跨浏览器实现float:center

  发布于2008-08-22 14:46 来源:网页教学网

跨浏览器实现float:center

我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。

以下是代码片段:
<div id="macji">
    <ul class="macji-skin">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
    </ul>
</div>

我们希望实现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;
}

跨浏览器实现float:center

 


中查找“跨浏览器实现float:center”更多相关内容

中查找“跨浏览器实现float:center”更多相关内容



上一篇:css技巧:经典CSS使用技巧几则
下一篇:IE6、IE7和FF的最简单的hack技巧
最近更新 赞助商
·网站设计Tab标签切换的效果制作11-07
·21个好玩、有趣味、实验性的css技术运用..11-07
·IE与FireFox在JavaScript和Css上的几处区别10-28
·CSS加JS让图片自动适应大小,任意浏览器..10-28
·FireFox浏览器和IE浏览器下CSS兼容问题10-21
·Web开发期待的CSS的一些功能10-21
·css教程:网页字体及字体大小的设计09-18
·CSS Alpha透明相关知识学习09-18
·关于W3C CSS标准的一些经验09-18
·div+css制作网页实战笔记心得09-18
·CSS网页布局的好处与坏处09-18

共有评论 0 条 网友评分 0分 查看所有评论


发表评论→ 学而不思则罔,思而不学则殆,请大胆发表你的见解。

输验证码:

您对此篇文章的评分:1分 2分 3分 4分 5分

  • 站内搜索
关键词

搜索方式

搜索范围

精确匹配
Baidu
网站首页 - 关于本站 - 网站地图 - 广告合作 - 站点声明 - RSS订阅 - 联系我们
Copyright © 2005 网海拾贝.[新ICP备05003216号]. All Rights Reserved .