Angularjs 列表项边距问题将 ng-repeat 元素与静态元素相结合

我想通过将存储在数组中的一些元素与一些将直接插入 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-repeated 项目似乎以某种方式被其余元素分隔开，并且添加了一些间距，打破了 1px 边距规则。

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

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

这是fiddle http://jsfiddle.net/fincher64/6MxbF/13/

你可能正被以下问题所困扰this https://stackoverflow.com/questions/1833734/display-inline-block-extra-margin。建议的解决方法（word-spacing: -1;）似乎没有在小提琴中工作。然而，将所有<li>如果可以接受的话，将 s 放在一行中似乎可以解决问题。