Angularjs 列表项边距问题将 ng-repeat 元素与静态元素相结合 [英] Angularjs List Item Margin Issue Combining ng-repeat elements with static ones
问题描述
我想通过将存储在数组中的一些元素与将直接插入到 html 中的一些静态元素进行分组来创建一个水平列表.像这样:
<ul><li>首页</li><li ng-repeat="i in items">{{i.label}}</li><li>博客</li>
我在控制器中声明了我的 items 变量:
myApp.controller("ListController", function ($scope) {$scope.items = [{编号:1,标签:新闻"}, {编号:2,标签:服务"}, {编号:3,标签: "产品"}];});
并创建了一些 css 规则来正确呈现水平列表:
.list-container {宽度:100%;背景颜色:#ff9900;}.list 容器 ul {边距:0px;填充:0px;列表样式类型:无;}.list 容器 ul li {填充:5px;右边距:1px;背景色:#f2f2f2;颜色:#000;显示:内联块;}
然而,似乎 ng 重复的项目以某种方式被其余元素分隔开,并且添加了一些间距,打破了 1px 边距规则.
那么,我该如何解决这个问题?
我知道将静态元素添加到我的模型是正确的方法,但对我来说似乎很奇怪,即使我使用开发人员工具找出生成该间距的 css 规则,我也找不到任何.
这是小提琴
您可能正被 这个.建议的解决方法 (word-spacing: -1;
) 似乎不起作用.但是,如果可以接受,将所有 放在一行中似乎可以解决问题.
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
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屋!