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