angular-ui-tab-scroll：单独包含的块到选项卡之间的奇怪间距

Question

首先，感谢这个很棒的图书馆！

现在，我在用单独包含的选项卡包装 tabset 时遇到了一个奇怪的问题，即通过单个 tab 元素在 DOM 中手动添加，或者通过使用 ng-repeat 添加的选项卡组：

看到这个plunker:

      <scrollable-tabset show-tooltips="false">
        <tabset>
          <!-- 1st Block of tabs-->
          <tab>
              <tab-heading>Tab 0</tab-heading>
              Tab 0 content
          </tab>
           <!-- 2nd Block of tabs-->
          <tab ng-repeat="tab in tabs1" active="tab.active" disabled="tab.disabled">
            <tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}
          </tab>
          <!-- 3rd Block of tabs-->
          <tab ng-repeat="tab in tabs2" active="tab.active" disabled="tab.disabled">
            <tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}
          </tab>
           <!-- 4th Block of tabs-->
          <tab>
              <tab-heading>Tab 6</tab-heading>
              Tab 0 content
          </tab>
        </tabset>
      </scrollable-tabset>

我inspected/compared每个块的css，但是没有区别...

有什么想法吗？

谢谢

Answer 1

这是因为您正在使用 inline-block。一系列内联块元素的格式与您通常的格式 HTML 相同，它们之间会有空格。

要解决这个问题，您应该使用 float，或者重新格式化您 html 以使元素之间没有空格。我建议你使用 float.

Fighting the Space Between Inline Block Elements

Answer 2

是的，正如efan Dimov 所说，可以使用float CSS 属性来解决。您还可以通过更改标记中的空格来实现相同的非间隔结果，如下所示：

http://plnkr.co/edit/FMf21S8ellpXTOawHgN2?p=preview

 <scrollable-tabset show-tooltips="false">
        <tabset><!-- 1st Block of tabs--><tab>
              <tab-heading>Tab 0</tab-heading>
              Tab 0 content
          </tab><!-- 2nd Block of tabs--><tab ng-repeat="tab in tabs1" active="tab.active" disabled="tab.disabled">
            <tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}
          </tab><!-- 3rd Block of tabs-->
          <tab ng-repeat="tab in tabs2" active="tab.active" disabled="tab.disabled"><tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}</tab><!-- 4th Block of tabs--><tab><tab-heading>Tab 6</tab-heading>
              Tab 0 content</tab></tabset>
      </scrollable-tabset>

这是@chriscoyier 的代码笔，演示了规避此问题的各种方法：http://codepen.io/chriscoyier/pen/hmlqF

angular-ui-tab-scroll：单独包含的块到选项卡之间的奇怪间距

angular-ui-tab-scroll: Weird spacing beetwen block to tabs included separetely

javascript

css

jquery

tabs

angularjs