Jquery UI选项卡 - 选定的选项卡更小的行高 - >最后一个选项卡打破设计

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

，因为所有的元素浮动左边的问题引起的。如果你“清楚：留下”包裹的元素，问题就会消失。不幸的是，很难说清楚：只要选定的元素是CSS中一行中的最后一个元素，元素后面就是元素的左边。

我发现，如果你拿出浮动和改变显示内联块，问题消失。

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