修改标签按钮的Jquery-ui标签布局

Question

我正在使用jquery-ui选项卡创建带有菜单的页面。 我决定在我的网站上使用以下图形

但是到此为止：

如您所见，我无法实现我的愿望。 我无法在jquery-ui上进行某些修改，至少我不知道如何解决它。 因为样式适用于所有材料，所以我不能最后更改ul> li。 我在下图中显示了它：

我将脚本添加到jsfiddle中以显示我已完成的工作。 http://jsfiddle.net/fad6d85o/

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

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

我已经进行了上述更改，但是当一个字符串很长而另一个字符串很短时就不好了。 它不会像彼此一样大小。

Answer 1

将此添加到您的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;
 }

演示版

Answer 2

请检查小提琴

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

据我所知，这就是您正在寻找的东西。 如果我是正确的，或者如果有其他问题，请随时将我标记为正确。 干杯......