再谈float菜单局中

作者：yoom 来源：蓝色理想时间：2009-12-21 19:57:00　

昨天用ucweb看到了goos发的一篇帖子：谁说Float菜单不可以水平居中，进去看了看，觉得方法有点繁琐了，用到了负边距，position:relativel; 和很少的一点hack。

我这里还有更简单的办法，先展示：

其实我外面应该再套一个div，但为了减少碳排放，舍弃。

运行代码框

其中最为关键的是这一句：

为了照顾较低版本IE，这里使用了条件注释，感觉在IE7以下中，display:inline;的作用就相当于inline-block;。

根据上面代码进化而来的滑动门导航：

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;padding:20px;border:solid 1px red;} #navigation li{height:30px;float:left;} #navigation li a{float:left;background:#97C099 url(/file/UploadPic/200912/21/381636_1236958262fsck-27.gif) left top no-repeat;padding-left:27px;height:30px;overflow:hidden;} #navigation li a span{height:30px;float:left;background:url(/file/UploadPic/200912/21/381636_1236958262fsck-27.gif) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;} #navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;} #navigation li a:hover span,#navigation li.current a span{background-position:right -528px;} #navigation li.current a{font-weight:bold;}</style><title>根据上面代码升级为滑动门样式</title></head><body><ul id="navigation"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>News</span></a></li> <li class="current"><a href="#"><span>Store</span></a></li> <li><a href="#"><span>Group</span></a></li> <li><a href="#"><span>Community</span></a></li> <li><a href="#"><span>Help</span></a></li></ul></body></html>

其中，这两句有必要说明一下，以免被认为是多余的：

#navigation li a{overflow:hidden;} /* 隐藏掉IE5.5、6多掉的那3px，不是3px bug哈！因为height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */
#navigation li a span{cursor:hand;}/* 照顾IE 5.5、6、7鼠标放在span上面不呈手型的bug。此外，IE5.5不支持cursor:pointer;但IE全版本都认识cursor:hand;*/

完工了，缺点就是，写那一行条件注释，对于有xhtml洁癖的人来说，就像眼里的沙子，想除掉，那就使用hack也无妨！呵呵！

在safari4，chorme，opera10，ie5.5、5、6、7,ff3中均暂未发现问题。

标签：ucweb,float,菜单

投稿

再谈float菜单局中

猜你喜欢

配置SQL Server 2000选项

asp解决fso.ReadAll提示输入超出了文件尾的错误

一步步教你安装VSCode(附带图解步骤)

浅谈PyQt5中异步刷新UI和Python多线程总结

SQL Server 开窗函数 Over()代替游标的使用详解

python实现带界面的井字棋小游戏

瞬间的设计(四)【碳酸饮料会】

PHP中的session永不过期的解决思路及实现方法分享

Python中空格的转义字符方式

一文教会你用Python获取网页指定内容

Python中使用Flask、MongoDB搭建简易图片服务器

总结Python连接CS2000的详细步骤

Go Grpc Gateway兼容HTTP协议文档自动生成网关

也谈用户体验

Golang errgroup 设计及实现原理解析

FrontPage2003 中网页布局功能的应用

Python字符串字母大小写转换的各种情况详析

python 二维矩阵转三维矩阵示例

python 队列基本定义与使用方法【初始化、赋值、判断等】

计算机管理服务中找不到mysql的服务的解决办法