设置Jquery ui选项卡的样式

我正在使用jquery选项卡，试图按照我认为合适的方式对它们进行样式设置。我试图缩小标签，并添加了一个

高度：45px到UI样式表，如下所示

.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;
}

然而，它没有缩小所有标签，而是保持了一个（最后一个）不变。可以在这里看到，标签是垃圾。我想了解发生了什么，以及如何解决它。此外，任何其他编码技巧将不胜感激
 首先在窗口小部件中输入字体大小

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

li
内的锚定标记高于
li
。如果你限制了这个高度，它可以工作

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


我刚刚注意到，使用chrome开发工具，您的选项卡重叠。只有最后一个没有重叠，因此看起来比其他的高
 玩这个高度可以解决问题：

.accordio li>a{高度：30px！重要；}

我用另一种方法稍微解决了这个问题，将
溢出：隐藏
应用到
。accordion li
规则：@keaukraine如果你仔细看，你会发现你的解决方案在选项卡周围没有边框，因此可能需要一些额外的样式来获得底部的边框谢谢你指出这一点。你的解决方案看起来真的更好：）谢谢，我很感激