css - Jquery UI 选项卡 - 选定的选项卡行高较小 ->最后一个选项卡中断设计

Question

我的 jQuery UI 选项卡有一个 css 问题。我想通过更改选项卡链接的高度来显示选择了哪个选项卡:

我通过改变 anchor 的行高来做到这一点:

.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 一行中的最后一个元素，就会位于所选元素之后的元素左侧。

我发现如果你去掉 float 并将显示更改为内联 block ，问题就会消失。

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