我现在在一个项目上工作。可悲的是,我坚持以下问题:
我使用ng-repeat来填充形成导航栏和Sass的列表,根据元素的数量调整列表元素的宽度,使宽度均匀分布。
看起来像这样:
HTML
<div class="leftViewNav" class="leftNav">
<div>
<ul>
<li ng-repeat= "leftNavTag in leftNavTags"><p>{{ leftNavTag.title }}</p></li>
<li><p>add</p></li>
</ul>
</div>
</div>
SCSS
li{
position: relative;
@for $i from 1 through 4 {
li:first-child:nth-last-child(#{$i}),
li:first-child:nth-last-child(#{$i}) ~ li {
width: 100% / $i
} }
height: 5%;
}
角
$scope.leftNavTags =
[
{
title: 'Analysis',
},
{
title: 'Log',
},
{
title: 'Edit',
}
];
CSS
.leftBound div ul li {
position: relative;
height: 5%;
float: left;
background-color: #C4C2C3;
border-right: 1px solid #000;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(1),
.leftBound div ul li li:first-child:nth-last-child(1) ~ li {
width: 100%;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(2),
.leftBound div ul li li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(3),
.leftBound div ul li li:first-child:nth-last-child(3) ~ li {
width: 33.33333%;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(4),
.leftBound div ul li li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
所以第一个元素的宽度为100%,第二个元素的宽度为50%,依此类推。
如何解决此问题,以便元素具有相同的宽度? 帮助很多。赞赏。
编辑:澄清了这个问题。 :
答案 0 :(得分:0)
问题#1:
在模板中,您有两个class
属性:
<div class="leftViewNav" class="leftNav">
问题#2:
sass循环嵌套太多了。您正在为.leftBound div ul li li
问题#3:
我们在模板中看不到任何leftBound
类。
如果您解决了这三个问题,那么您将获得 fiddle 。 (注意:添加了bootstrap list-unstyled
类到 kill 默认列表样式)