Css Jquery UI选项卡-所选选项卡行高较小->最后一个选项卡打断设计

我的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似乎没有受到影响

这里有一个最起码的例子：

---

问题的原因是所有元素都向左浮动。如果清除：保留环绕的元素，问题就会消失。不幸的是，很难说清楚：只要选定的元素是CSS中一行中的最后一个元素，该元素就位于选定元素之后的左侧

我发现，如果去掉float并将display改为inline块，问题就会消失

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