Currently, I am working on a project and encountering an issue that is causing some difficulty:
In order to create a navigation bar with equally distributed list elements based on the number of items, I am utilizing ng-repeat for data binding and Sass for styling adjustments.
This is what the code looks like:
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%;
}
Angular
$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%;
}
To ensure equal width distribution among elements, the first item occupies 100% width, the second takes up 50%, and so on.
If you have any suggestions or solutions on how to address this issue, your assistance would be greatly appreciated.
Edit: Further clarification provided regarding the question. :