Question

我现在已经研究了几个小时了，我根本无法理解问题所在。我已经能够把错误分解成这个小提琴：http://jsfiddle.net/6r781vz3/。单击Tab 2!，然后单击以添加三个新选项卡。您会注意到间距不同，原始选项卡在选中时似乎也会移动。

我已经使用着名的单选按钮hack构建了一个纯CSS选项卡式窗格。它很棒。不过，我注意到它需要一个奇怪的填充才能使其工作（参见下面的代码）。它们只是<input>，后跟<label>，然后是<div>，就像示例中的情况一样。

当我尝试向其添加动态新标签时，我注意到这个填充不是必需的，但我发现奇怪的是HTML结构是相同的，但它的行为不同。

/* I only need this for raw html, and I have no idea why!
   Not even idea why I would need this for anything!
   I don't need them for dynamic tabs... */

.tabs .tab [type="radio"]:checked + .tab-label {
  margin-right: -6px;
}

.tabs .tab [type="radio"]:not(:checked) + .tab-label {
  margin-right: -10px;
}

我可能会监督一些非常简单的事情。我不认为这是一个错误，因为它在Chrome和Firefox上以这种方式工作。

有人能看到问题吗？：（

Answer 1

因为在元素之间使用display: inline-block空间成为浏览器上的可视空间。您可以通过一些解决方案处理此问题一种是将font-size: 0用于父元素，将特定的元素用于：

.tabs .tab {
  display: inline;
  font-size: 0;/*set font size to 0*/
}

.tabs .tab-label {
    background-color: rgba(255, 0, 0, 0.3);
    font-size: 16px;/*set desire font size*/
    display: inline-block;
    padding: 7px;
    margin: 1px;
    position: relative;
    vertical-align: bottom;
    border-right: 1px solid #ddd;
}

也是fiddle

原始HTML样式与jQuery生成的HTML具有相同的结构

1 个答案: