Javascript Wordpress&x2B；JQuery UI选项卡+；动态更改选项卡的宽度

我正试图在WordPress站点的一个页面上设置一个选项卡式窗格（通过jQuery）。我有标签工作，在大多数情况下，它看起来如何，我希望它在这个阶段。但有一个问题——设置选项卡的宽度，使每个选项卡的跨度足够长，使它们的组合等于窗格的空间。现在这通常不会太难，但问题是我不知道最后会有多少个标签（我的客户不确定）

以下是我通过Jetpack的自定义CSS功能使用的CSS：

.ui-tabs-nav {
    font-size: larger;
    font-weight: bold;
    background: none;
    height: 30px;
/*To stop nav block scaling of tab size*/
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
    border: none;
    background: none;
}

.ui-tabs .ui-tabs-nav li {
    display: inline;
    border: none;
    margin: 0 0 -5px;
    background: none;
}

.ui-tabs-anchor {
    color: #000034;
}

ul.ui-widget-header, ul.ui-widget-content, ul.ui-state-default, ul.ui-state-hover {
    background: none;
    border: none;
}

.ui-tabs-active a {
    text-decoration: none;
    background: none;
    color: #222222;
    position: relative;
    z-index: 5;
}

和一些javascript来调整选项卡的宽度：

jQuery(document).ready(function($) {
        var numTabs = $('#tabs li').length;

        var tabWidth = 100 / numTabs;
        var tabPercent = tabWidth + "%";

        var liArray = $('#tabs li');

    var i;

    for (i = 0; i < liArray.length; i++) {
        liArray[i].style.width = tabPercent;
    }
});

jQuery（文档）.ready（函数（$）{
var numTabs=$（'#tabs li'）。长度；
var tabWidth=100/numTabs；
var tabPercent=tabWidth+“%”；
var-liArray=$（“#tabs li”）；
var i；
对于（i=0；i

最后，一些HTML：

<div id="tabs">
<ul class="ui-widget-header ui-corner-top">
    <li><a href="#tabs1">First</a></li>
    <li><a href="#tabs2">Second</a></li>
    <li><a href="#tabs3">Third</a></li>
</ul>
<div id="tabs1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
菲塞勒斯·马蒂斯·丁西登·尼布。克拉斯·奥奇·乌纳、布兰迪·艾德、普雷蒂姆·维尔、阿利奎特·奥纳雷、猫科动物。Maecenas scelerisque sem非nisl。这是我的名言。
Nam dui erat、拍卖人a、贵宾奎斯、索利西图丁欧盟、菲利斯。内耳、中耳、矢状肌、前庭、腔隙。毛里斯·波特托·乌兰科珀·奥古斯。

所以，是的，记住这些代码片段-我如何使用Javascript动态地将样式应用到我的选项卡上，使它们的宽度总和=窗格的100%

---

谢谢

将li更改为块元素，以便可以设置其宽度

jQuery(document).ready(function($) {
    $("#tabs").tabs();

    var numTabs = $('#tabs li').length;
    var tabWidth = 98 / numTabs; // using 98 because sometimes using 100 will cause last element to get "bumped" down below the first element.
    var tabPercent = tabWidth + "%";

    $('#tabs li').each(function () {
        $(this).css("width", tabPercent);
        $(this).css("display", "inline-block");
    });
});

---

为什么不在他们身上使用桌面技巧？我的意思是，使用display:table作为父对象，table cell作为子对象，它们应该覆盖容器的整个宽度