Foundation Button Groups plain html 和 ng-repeat 不同的结果

Question

我将 Foundation 版本从 5.3.3 升级到 5.5.2。一切都很好，期待一些元素，如按钮组。这是一个例子。

<div class="row">
  <div class="small-6 columns">
    <ul class="button-group even-2">
      <li ng-repeat="i in [1, 2]">
        <a href="#" class="button tiny">{{i}}</a>
      </li>
    </ul>
    <ul class="button-group even-2">
      <li><a href="#" class="button tiny">1</a></li>
      <li><a href="#" class="button tiny">1</a></li>
    </ul>
  </div>
</div>

这两种方法会产生不同的结果。 Angular ng-repeat 指令将创建较小的结果。怎么会这样？

我创建了一些可重现的示例。第一个是非工作示例。

示例 1：http://jsfiddle.net/kauzbzby/1/ 基础版 5.5.2

第二个示例按预期工作，但使用的是较旧的 Foundation 版本。

示例 2：http://jsfiddle.net/h5kqb4yv/1/ 基础版 5.3.3

Angular版本没有变化。有人知道如何解决这个问题吗？

即使没有 even-* class 的例子也会产生不同的结果

干杯。

Answer 1

解释见这里：http://jsfiddle.net/13k/gTm9S/

这是由于 ng-repeat 在它们之间添加了 lis 而没有 spaces，其中手动创建的由于回车 return 而具有 space和用于对齐的选项卡。

在这里查看您的示例工作：http://jsfiddle.net/mk490brw/

<li><a href="#" class="button tiny">1</a></li><li><a href="#" class="button tiny">2</a></li><li><a href="#" class="button tiny">3</a></li><li><a href="#" class="button tiny">4</a></li><li><a href="#" class="button tiny">5</a></li><li><a href="#" class="button tiny">6</a></li><li><a href="#" class="button tiny">7</a></li>

将所有 li 挤在一行中使它们具有相同的宽度和间距...即使读起来有点难看。

5.3.3 中按钮组列表的样式是

.button-group>li {
  margin: 0;
  float: left;
}

而 5.5.2 是：

.button-group.even-# li {
  display: inline-block;
  margin: 0 -2px;
  width: 14.28571%;
}

同样，重要的部分是 inline-block。内联块使每个元素之间的任何 space 显示为 space。

如果您对为什么 添加它感到好奇，添加它似乎是为了支持按钮堆叠。这是提交 https://github.com/zurb/foundation/commit/d49b9a72b9d989f2c9c7156c6a30e510cc0c9df4

Foundation Button Groups plain html 和 ng-repeat 不同的结果

Foundation Button Groups plain html and ng-repeat different results

javascript

css

angularjs

angularjs-ng-repeat

zurb-foundation-5