最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css控制导航栏的居中
时间:2008-01-11 编辑:简简单单 来源:一聚教程网
在学习的过程中,我希望能够得到css的导航栏也能够居中的效果
但是,使用普通的text-align:center;
不起作用,经过在网上搜索
在经典论坛得到链接,uk的cssplay网站上公布了两种使其居中的方法
其中有一个使用了非常奇怪的del标签,不知道是为什么
但是总算解决掉了一个问题仍然很高兴
代码如下 | 复制代码 |
#menu1 { width:408px; padding:0; margin:0 auto; list-style-type:none; } #menu1 li { float:left; width:100px; border:1px solid #fff; } #menu1 a { display:block; width:100px; color:#000; background:#d4d4d4; text-align:center; padding:4px 0; text-decoration:none; float:left; } #menu1 a:hover { color:#fff; background:#08c; } #menu2 { display:table; padding:0; margin:0 auto; list-style-type:none; white-space:nowrap; } #menu2 li { display:table-cell; } * html #menu2 li { float:left; } #menu2 a { width:auto; display:block; padding:4px 16px; color:#fff; background:#08c; border:1px solid #fff; text-decoration:none; } * html #menu2 a { float:left; } #menu2 a:hover { color:#000; background:#d4d4d4; } .container {clear:both; text-decoration:none;} * html .container {display:inline-block;} XHTML |
-
上一个: 清除DIV浮动-使用:after
-
下一个: 使用css在不同页面上使用同样的导航代码
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26