css – Angularjs列表项边距问题将ng-repeat元素与静态元素组合在一起

2023年6月26日 151次阅读

我想通过对存储在数组中的一些元素进行分组以及将直接插入到html中的一些静态元素来创建水平列表.像这样的东西：

<div class="list-container push-down" ng-controller="ListController">
    <ul>
        <li>Home</li>
        <li ng-repeat="i in items">{{i.label}}</li>
        <li>Blog</li>
    </ul>
</div>

我在我的控制器中声明了我的items变量：

myApp.controller("ListController", function ($scope) {
$scope.items = [{
        id: 1,
        label: "News"
    }, {
        id: 2,
        label: "Services"
    }, {
        id: 3,
        label: "Products"
    }];
});

并创建了一些css规则来正确呈现水平列表：

.list-container {
    width: 100%;
    background-color: #ff9900;
}

.list-container ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.list-container ul li {
    padding: 5px;
    margin-right: 1px;
    background-color: #f2f2f2;
    color: #000;
    display: inline-block;
}

然而,似乎ng重复的项目以某种方式被其余元素分开,并且添加了一些间距以打破1px边距规则.

那么,我该如何解决这个问题呢？

我知道将静态元素添加到我的模型中是正确的方法,但对我来说似乎很奇怪,即使我使用开发人员工具找出css规则生成的间距,我找不到任何.

这是fiddle

最佳答案 你可能会受到
this的困扰.建议的解决方法(字间距：-1;)似乎不适用于小提琴.然而,如果这是可接受的,则将所有< li>放在一行中似乎解决了该问题.

点赞