Question

我正在尝试使用ng-repeat实现类似布局的网格。

当列表中有空数据时，网格会出现对齐问题。我没有到达我出错的地方。

请帮我解决这个问题。 JS Fidlle HTML

<div ng-app ng-controller="MyCtrl">
    <ul>
        <div ng-repeat="item in items" style=" height: 50px; width: auto;">
            <span ng-repeat="goals in item" style="display: inline-block; border: 1px solid black; height: 50px; width: 100px;">
                {{goals}}
            </span>
        </div>
    </ul>
</div>

JS

var n = [
["Empty","Jan","Feb","Mar","APR","MAY"],["person1",".",".",".",".","."],["person2",".",".",".",".","."],["person3",".",".",".",".","."],["person4",".",".",".",".","."],["person5","","","","",""]
]

function MyCtrl($scope) {
    $scope.items = n;
}

Answer 1

这是inline-block元素的样式问题。要修复，请添加vertical-align: bottom样式。

<span ng-repeat="goals in item" style="display: inline-block; border: 1px solid black; height: 50px; width: 100px; vertical-align: bottom">
   {{goals}}
</span>

使用ng-repeat的网格问题

1 个答案: