Question

我对使用ng-repeat生成的列表项有一个非常奇怪的布局问题。

如果查看视图，您会看到绿色的li（不是使用ng-repeat生成）由于意外空间而进入下一行。此外，如果您将li的宽度更改为33％，您将看到最后一个li（添加用户）未正确对齐。

我可以通过一些css技巧解决这个问题，但我想了解为什么会发生这种情况，以及是否有任何方法可以避免这种情况。有没有人遇到过这个问题并弄清楚为什么会这样？

仅在下面添加代码，因为plunker链接需要附带一些代码

.users * {
  box-sizing: border-box;
}
.users ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.users ul li {
  width: 49%;
  margin: 5px 1% 0 0;
  padding: 0;
  display: inline-block;
}
.users ul li.user {
  background: yellow;
}
.users ul li.add-user {
  background: lightgreen;
}

Answer 1

这是因为在结束</li>和<li class="add-user">

之间有一个空格（由回车创建）

像这样编写你的html，最后的li将正确显示：

  ...
  <li class="user" data-ng-repeat="user in vm.users track by $index">
    <div>{{ user.name }}</div>
  </li><li class="add-user">
    <div>
      <a>Add Child</a>
    </div>
  </li>
 ...

Angularjs - 上次ng-repeat li后的意外空间

1 个答案: