如何在jQuery Steps Plugin中更改選項卡的寬度

Question

我正在使用jQuerySteps插件來創建選項卡。 我有四個部分，因此有4個標簽，它們完美地工作。 但我希望每個標簽具有different percent of width 。 截至目前，他們每個人得到25％。 但我想手動為它們分配寬度。 我可以通過添加CSS類來實現。 但由於它是一個插件，我無法找到如何創建和呈現<ul> and <li> 。

以下是插件設置25％寬度的方式。

我的前端代碼：

<div id="example-basic">
    <h3>Keyboard</h3>
    <section>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
    </section>
    <h3>Effects</h3>
    <section>
        <p>Wonderful transition effects.</p>
    </section>
    <h3>Pager</h3>
    <section>
        <p>The next and previous buttons help you to navigate through your content.</p>
    </section>
</div>

JS代碼

$("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});

題：

如何添加id或類，以便我可以設置first tab : 20 % second tab:40 % and so on寬度first tab : 20 % second tab:40 % and so on

Answer 1

CSS

.wizard>.steps>ul>li:nth-child(1){
    width: 20%;
}
.wizard>.steps>ul>li:nth-child(2){
    width: 40%;
}