一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > css教程 > 样式布局

推荐专题

最新下载

热门教程

css控制导航栏的居中

时间：2022-07-02 13:09:56 编辑：袖梨 来源：一聚教程网

在学习的过程中，我希望能够得到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

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理