Question

我现在在一个项目上工作。可悲的是，我坚持以下问题：

我使用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％，依此类推。

如何解决此问题，以便元素具有相同的宽度？帮助很多。赞赏。

编辑：澄清了这个问题。：

Answer 1

问题＃1：

在模板中，您有两个class属性：

<div class="leftViewNav" class="leftNav">

问题＃2：

sass循环嵌套太多了。您正在为.leftBound div ul li li

创建样式

问题＃3：

我们在模板中看不到任何leftBound类。

如果您解决了这三个问题，那么您将获得 fiddle 。（注意：添加了bootstrap list-unstyled类到 kill 默认列表样式）

Angular ng-repeat和Sass冲突

1 个答案: