Jquery UI选项卡 - 选定选项卡较小的行高 - ＆gt;最后一个标签打破设计

Question

我的jQuery UI标签出现了css问题。我想通过更改标签链接的高度来显示选择了哪个标签：

我是通过更改锚点的行高来实现的：

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  line-height: 10px;
}

不幸的是，只要您选择行上的最后一个标签，就会破坏布局：

当我尝试通过为li元素添加边距来解决此问题时：

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  margin-bottom: 14px;
  padding-bottom: 0px;
}

选择最后一个元素后，问题就解决了，但现在所有其他选项卡在选中时都会破坏布局：

那么如何解决这个问题？问题出现在firefox中，不是100％肯定，但Chrome似乎没有受到影响。

这是一个最小的例子： http://jsfiddle.net/gkt6bco6/3/

Answer 1

问题是由于所有元素都向左浮动而引起的。如果你＆＃34;明确：左＆＃34;包裹的元素，问题就消失了。遗憾的是，很难说明清楚：只要选中的元素是CSS中的最后一个元素，就会在所选元素之后留下元素。

我发现如果取出浮动并将显示更改为内联块，问题就会消失。

.ui-tabs .ui-tabs-nav li {
    float: none;
    display: inline-block;
}