Css Angularjs列表项边距问题结合ng重复元素和静态元素
我想通过将存储在数组中的一些元素与将直接插入html的一些静态元素分组来创建一个水平列表。大概是这样的:Css Angularjs列表项边距问题结合ng重复元素和静态元素,css,list,angularjs,margin,ng-repeat,Css,List,Angularjs,Margin,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>
<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>
并创建了一些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重复项以某种方式被其余元素隔开,并且添加了一些间距,打破了1px边距规则
那么,我怎样才能解决这个问题呢
我知道将静态元素添加到我的模型中是正确的方法,但我觉得奇怪的是,即使我使用开发人员工具找出css规则生成的间距,我也找不到
以下是您可能正受到困扰的问题。建议的解决方法(
字距:-1;
)似乎不起作用。但是,如果可以接受的话,将所有的
放在一行似乎可以解决问题
.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;
}