基础按钮组纯 html 和 ng 重复不同的结果

Question

我将基础版本从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>

这两种方法将创建不同的结果。角度ng-repeat指令将创建一个较小的结果。怎么会这样？

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

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

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

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

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

即使没有 even-* 类的示例也会创建不同的结果

干杯。

Answer 1

请参阅此处以获取说明：http://jsfiddle.net/13k/gTm9S/

这是由于 ng-repeat 添加了 li s，它们之间没有空格，其中手动创建的 s 由于回车符和用于对齐的制表符而具有空格。

请参阅此处了解您的工作示例：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 中按钮组 lis 的样式是

.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。内联块使每个元素之间的任何空格显示为一个空格。

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