RSS
热门关键字:  CSS教程  CSS布局  CSS样式  CSS hack  CSS JS
当前位置 :| 主页>CSS菜单>

未知总宽度的列表菜单水平居中的解决方案

来源:cssplay 作者:cssplay 时间:2008-08-25 点击:

这是一个未知总宽度的列表菜单水平居中的例子,如果列表总宽度是已知的,那么居中是很容易的,只要设定margin:0 auto; ,而IE在Quirks Mode下,在外面容器中设text-align:center;就可以了。如果宽度是未知的,问题就俏有复杂了。


解决方法:

经作者研究,一种非标准的方法,可以在IE5.5, IE6, Firefox, Mozilla, NN, Opera and Safari,上实现未知总宽度的列表菜单水平居中。

For Internet Explorer

在菜单外面使用一个<del>标签,风格设为:display:inline-block;,然后将 text-align:center;设在再外面的DIV上,而用text-decoration:none;去除<del>的删除线。


For other browsers

在列表菜单里不能使用:loat:left 或者 display:inline,而要使用:display:table / table-cell。


不支持Mac IE5.


CSS

#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

<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>

作者发表这篇文章时在去年,我想大概是这个原因,所以没有提到用IE7测试,我用IE7RC1测试,完全可用。


因为DEL在这菜单中仅用于IE,所以把代码改了下:


<!--[if IE]>
  <del class="container">
    <![endif]-->
      <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>
    <!--[if IE]>
  </del>
<![endif]-->


这样标准浏览器可不加载DEL标签。


实例运行代码框如下:


 提示:您可以先修改部分代码再运行


上一篇:没有了
下一篇:没有了
最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
热点实例