javascript - 填充导航栏的方法 - Tables/CSS/JS

Question

我正在为需要 ie7>= 支持的网站开发导航栏。导航栏可以包含任意数量的链接，每个链接可以包含不同数量的文本，因此可以有不同的大小。但是我希望导航栏自动将每个链接隔开，以便它们填充父容器。

这是一个使用纯 css 设置每个导航栏上的填充的解决方案: https://jsfiddle.net/n07x8963/4/

#nav_1 li { padding:0px 36px;}

问题是这需要根据链接的数量和链接内文本的宽度为每个导航栏手动指定填充。每次导航栏的内容发生变化时都必须这样做。

自动执行此操作的一种方法当然是使用表: https://jsfiddle.net/t0t29yne/1/

或者通过 JavaScript，如下所示: https://jsfiddle.net/jtz4thfo/1/

每种解决方案都有优点/缺点，所以我想知道是否有人有更好的解决方案，或者是否有人反对使用上述任何一种方法。

谢谢

更新:我最终选择了表格，ie7+ 浏览器得到 UL，LI 的显示:table-row，display:table-cell 在 CSS 中被覆盖。

在 ie7 获取实际表格的地方。

我知道使用表格进行布局通常被认为是错误的，但在这种情况下，没有足够的纯 CSS 解决方案，所以我认为这是最好/最简单的解决方案。

Answer 1

在 IE7 中，我建议仅通过 CSS 使用表格是不可能的。

.nav {
    width: 600px;
    height: 20px;
    background-color: #FF9;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;  
    display: table; /*IE8+ and non-IE*/
    width: 100%; 
            
}
ul li {
    background-color: #F9F;
    display: table-cell; /*IE8+ and non-IE*/
    text-align: center;    
}

<div id="nav_1" class="nav">
    <ul>
        <li id="link_1">AAAA</li>
        <li id="link_2">BB</li>
        <li id="link_3">CCCCCC</li>
        <li id="link_4">DDDD</li>
        <li id="link_5" class="last">EEEEEE</li>
    </ul>
</div>
<div id="nav_2" class="nav">
    <ul>
        <li id="link_6">FFFFFF</li>
        <li id="link_7">GGGG</li>
        <li id="link_8">HH</li>
        <li id="link_9">IIIIIII</li>
        <li id="link_10" class="last">JJJJ</li>
    </ul>
</div>