Angularjs列表项保证金问题结合ng-repeat元素和静态元素 [英] Angularjs List Item Margin Issue Combining ng-repeat elements with static ones

问题描述

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

I want to create a horizontal list by grouping some elements stored in an array along with some static elements that will be directly inserted in the html. Something like this:

<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 变量:

I declared my items variable in my controller:

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

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

and created a few css rules to render the horizontal list properly:

.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的边距规则.

However, it appears that the ng-repeated items are somehow separated by the rest elements and some spacing is added breaking the 1px margin rule.

那么，我该如何解决呢?

So, how can I fix this?

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

I know that adding the static elements to my model is the proper way to go, but it seems weird to me that even if I use the developer tools to find out what css rule generates that spacing, I can't find any.

这是小提琴

推荐答案

此.建议的解决方法(word-spacing: -1;)似乎不起作用.但是，如果可以接受的话，将所有<li>放在一行中似乎可以解决问题.

You are probably being plagued by this. The suggested workaround (word-spacing: -1;) seems not to be working in the fiddle. However placing all the <li>s in one line seems to solve the problem, if this is acceptable.

这篇关于Angularjs列表项保证金问题结合ng-repeat元素和静态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！