Javascript 修改选项卡按钮的Jquery ui选项卡布局

我正在使用jQueryUI选项卡创建一个带有菜单的页面。我决定在我的网站上放一张像下面这样的图片

但结果是：

正如你所看到的，我无法实现我的愿望。有一些东西我不能在jQueryUI上修改，至少我不知道如何解决它。因为样式适用于所有材料，所以我无法更改第一个和最后一个ul>li。我在下图中明确了这一点：

我将脚本添加到JSFIDLE中，以显示我所做的工作。

下面列出了我的两个问题： 1-如何将不同的css应用于第一个和最后一个ul>li？ 2-如何定义例如宽度：ul>li>a链接的25%？我想定义容器宽度：800px，然后为ul>li>a链接设置宽度：100/n%

.ui-widget-content a {
    color: #333333;
    padding: 60px;
    line-height: 4.3em;
}

---

我已经做了上面的修改，但当一个字符串长而另一个字符串短时，这并不好。它的大小将不一样。

将此添加到css中：-

.ui-tabs-nav  li:last-child
 {
   border-radius:4px 0px 0px 4px;
 }
 .ui-tabs-nav  li:first-child
 {
  border-radius:0px 4px 4px 0px;
 }

请检查一下电话号码

据我理解你的问题，我想这就是你想要的。

---

如果我是正确的，或者如果还有其他问题，请将我标记为正确，我准备提供帮助。干杯。好把戏。但第二个问题呢？我想使用ul的特定宽度，例如1000px，如果我有5li，那么使用200px。如果您不理解，请让我知道并解释更多内容。@PejmanGhasemi您是否希望对所有锚点应用相同的宽度，即tab1、tab2等？谢谢您的回复。是的，我想有相同的宽度，即使不同大小的字符串，请看看这个，它还没有解决。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>