2

I'm trying to make a full width menu. I have problem with IE7 since display: table-cell doesn't support in IE7. Is there any solutions beside this?

Here my code:

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

I also try it with Javascript, but it works not really well when I add more items in menu. Thank in advanced for your value time :)

4

1 回答 1

2

你能用display: inline;吗？

在此处查看我的示例：小提琴示例

于 2013-01-28T11:21:43.083 回答