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

Method for padding nav bar - Tables / CSS / JS

本文关键字：表格 CSS JS 方法 导航 填充      更新时间：2023-09-26

我正在为一个需要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的服务带有在CSS中覆盖的display:table行，display:table-cell。

在哪里可以买到真正的桌子。

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

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

相关文章：