在 ng-repeat 中渲染 LI 时，AngularJS 不尊重 CSS 样式答案

【问题标题】：AngularJS not respecting CSS styles when rendering LIs in ng-repeat在 ng-repeat 中渲染 LI 时，AngularJS 不尊重 CSS 样式
【发布时间】：2015-08-07 22:58:57
【问题描述】：

我决定实现一组由一条线连接的圆形，如this question 中所述。在静态 HTML 中一切似乎都可以正常工作，但是当我使用 Angular 的 ng-repeat 使其动态化时，圆圈左对齐。可以通过下面的jsFiddle来清楚的说明： https://jsfiddle.net/1ho1zz59/

<ul class="progress-rnd">
    <li ng-repeat="step in steps">
      {{step.name}}
    </li>
</ul>

基于此，我只有两个问题：

为什么会这样？
我该如何解决？

谢谢！

【问题讨论】：

标签： javascript html angularjs css templates

【解决方案1】：

问题是text-align: justify; 作用于其中有空格的 html 与 Angular 生成的不同（li 标记后面是注释的 html 和下一个标记）。这个指令应该可以工作，example:

var app = angular.module('testApp', []);
angular.module('testApp')
.directive('addASpaceBetween', [function () {
        'use strict';
        return function (scope, element) {
            element.after(' ');
        }
    }
]);

并将其添加到重复 ng-repeat="step in steps" data-add-a-space-between

【讨论】：

效果很好。需要提高我的 html/css 技能。

【解决方案2】：

原因是因为在 Html 中，当你有元素 inline-block 时，它们之间会有空格，在这种情况下是你的 LI 标签。您可以通过在 CSS 中创建它们之间的真实距离来修复它，而不是依赖于 HTML。

解决方案 http://jsbin.com/qumawex/edit?css,output

【讨论】：