css控制导航栏的居中

来源:互联网 发布:项目管理网络培训 编辑:程序博客网 时间:2024/04/28 01:06
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
在学习的过程中,我希望能够得到css的导航栏也能够居中的效果
但是,使用普通的text-align:center;
不起作用,经过在网上搜索
在经典论坛得到链接,uk的cssplay网站上公布了两种使其居中的方法
其中有一个使用了非常奇怪的del标签,不知道是为什么
但是总算解决掉了一个问题仍然很高兴

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

<ul id="menu1"><li><a href="#nogo">Tab One</a></li><li><a href="#nogo">Tab Two</a></li><li><a href="#nogo">Tab Three</a></li><li><a href="#nogo">Tab Four</a></li></ul><del class="container"><ul id="menu2"><li><a href="#nogo">Tab One</a></li><li><a href="#nogo">Tab Two: Longer</a></li><li><a href="#nogo">Tab Three: Longest</a></li><li><a href="#nogo">Tab Four</a></li></ul></del>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
原创粉丝点击