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

Posted 2023-03-06

【中文标题】Angularjs列表项边距问题将ng-repeat元素与静态元素结合起来

【英文标题】：Angularjs List Item Margin Issue Combining ng-repeat elements with static ones

【发布时间】：2014-04-01 06:30:37

【问题描述】：

我想通过将存储在数组中的一些元素以及将直接插入到 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

【参考方案1】：

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