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 demo的标签。我想了解发生了什么以及如何解决它。此外，任何其他编码技巧将不胜感激。

Answer 1

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

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

See updated fiddle

我刚注意到Chrome开发人员工具的标签重叠。只有最后一个没有重叠，因此看起来比其他人高。

Answer 2

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

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

Answer 3

玩这个高度将解决问题：

.accordion li＆gt; a {身高：30px！重要; }

样式Jquery-ui选项卡

3 个答案: