Question

我正在尝试制作全宽度菜单。 IE7因为显示我有问题：在IE7中不支持table-cell。除此之外还有其他解决方案吗？

这是我的代码：

<div class="main_nav second">
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact us</a></li>
     </ul>
</div>

CSS：

    .main_nav ul {
        display: table;
        position: relative;
        table-layout: auto;
        width: 100%;
        padding: 0;
        border: 1px solid #CCCCCC;
    }

    .main_nav ul li {
        list-style: none;
        float: none;
        display: table-cell;
    }

    .main_nav ul li a {
        padding: 10px 15px;
        display: block;
        text-decoration: none;
    }

我也尝试使用Javascript，但是当我在菜单中添加更多项目时效果不是很好。感谢您的超值时间：）

Answer 1

您可以使用display: inline;吗？

请参阅我的示例：fiddle example

全宽菜单支持IE7的CSS？

1 个答案: