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

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

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"
    }];
});

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

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?

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.

Here's the fiddle

Answer 1

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.