Question

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

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

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

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

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

或者通过JavaScript看到这里： https://jsfiddle.net/jtz4thfo/1/

每个解决方案都有优点/缺点，因此我想知道是否有人有更好的解决方案或使用任何上述方法的论据。

由于

更新：我最终选择了表格，即7 +浏览器获得UL，＃，带有display：table-row，display：table-cell在CSS中被覆盖。

ie7获得实际表格的地方。

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

Answer 1

在IE7中，我建议只能通过CSS使用表格。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: