css - Jquery UI tabs - Selected tab smaller line-height -> last tab breaks design -

i having css problem jquery ui tabs. want show tab selected changing height of tab link:

i changing line-height of anchor:

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

unfortunately breaks layout whenever select last tab on row:

when tried solve adding margin li element:

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

the problem fixed when last element selected, other tabs break layout when selected:

so how solve this? issue seen in firefox, not 100% sure seems chrome unaffected.

here minimum example: http://jsfiddle.net/gkt6bco6/3/

the issue caused because elements float left. if "clear:left" element wraps around, issue goes away. unfortunately, it's hard clear: left of element after selected 1 whenever selected 1 last on line in css.

i found if take out float , change display inline-block, issue goes away.

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