在学习的过程中,我希望能够得到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;}
<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>
Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长:MinTao ICP备案号:鄂ICP备11006601号-18