Jquery-ui选项卡的样式设置

Question

我正在使用jQuery选项卡，并尝试将它们样式化成我想要的样子。我尝试缩小选项卡的大小，并在UI样式表格中添加了height:45px;，如下所示。

.ui-tabs-vertical .ui-tabs-nav li { 
  clear: left; 
  height:45px; 
  width: 100%; 
  border-bottom-width: 1px !important; 
  border-right-width: 0 !important;
  margin: 0 -1px .2em 0;
}

但是，它并没有缩小所有的选项卡，而是保留了一个（最后一个）不变。可以在这里看到，标记为"Trash"的选项卡：JS-FIDDLE演示。我想了解发生了什么以及如何修复它。此外，任何其他编码提示都将不胜感激。

- Octavius

Answer 1

中锚标签比 li 标签高。如果限制该高度，则可以正常工作。

    .ui-tabs-vertical .ui-tabs-nav li a { height: 30px; }

查看更新后的演示

我刚刚在Chrome开发者工具中注意到，您的选项卡重叠了。只有最后一个选项卡没有重叠，因此看起来比其他选项卡更高。

- bart s

---

我用另一种方式稍微修复了它，通过将overflow:hidden应用于.accordion li规则：http://jsfiddle.net/gYfQD/ - keaukraine

@keaukraine 如果你仔细看，你会发现你的解决方案在选项卡周围没有边框，因此可能需要一些额外的样式来恢复底部的边框。 - bart s

谢谢您指出这个问题。您的解决方案看起来确实更好 :) - keaukraine

Answer 2

首先在小部件中缩小字体大小

.ui-widget{font-family:Arial,sans-serif;font-size:medium}

- Rami Jamleh

Answer 3

修改这个高度值可以解决问题：

.accordion li > a {height:30px !important; }

- gotqn