Angularjs List Item Margin Issue Combining ng-repeat elements with static

Question

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 into html. Something like that:

<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>

I declared an element variable in my controller:

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

and created some CSS rules to display a horizontal list:

.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;
}

However, it seems that the ng-repeating elements are somehow separated by the rest of the elements, and some distance is added that violates the 1px margin rule.

So how can I fix this?

, - , , , , css , .

fiddle

Answer 1

, . (word-spacing: -1;), , . <li> , , , .