I want to remove free space between my li and arrange my li the first pic is my code wants to change my navbar Free space like the second pic and this is my styles i use in my codes
.test{
margin: 0;
width: 20.65%;
padding: 0;
height: max-content;
display: unset !important;
vertical-align: top;
white-space: nowrap;
}
.right{
text-align: right !important;
display: flex;
flex-wrap: wrap;
flex-flow: wrap;
height: 500px!important;
}
---- this ---- this code must change to remove free space like the second pic
----- second pic ------ arrange and remove free space in navbar like this pic
<ul class="test">
<a class="text-bold" href="#">title</a>
<ul class="list">
<li class="w-100 text-right"><a href="#">test linkss</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
</ul>
</ul>
<ul class="test d-block">
<a class="text-bold" href="#">title1</a>
<ul class="list">
<li class="w-100 text-right"><a href="#">test linkss</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
</ul>
</ul>
<ul class="test">
<a class="text-bold" href="#">title</a>
<ul class="list">
<li class="w-100 text-right"><a href="#">test linkss</a></li>
<li class="w-100 text-right"><a href="#">test link</a></li>
</ul>
</ul>
<ul class="test">
<a class="text-bold" href="#">title</a>
<ul class="list">
<li class="w-100"><a href="#">test linkss</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
</ul>
</ul>
<ul class="test">
<a class="text-bold" href="#">title</a>
<ul class="list">
<li class="w-100"><a href="#">test linkss</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
</ul>
</ul>
<ul class="test">
<a class="text-bold" href="#">title</a>
<ul class="list">
<li class="w-100"><a href="#">test linkss</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
</ul>
</ul>
<ul class="test">
<a class="text-bold" href="#">title</a>
<ul class="list">
<li class="w-100"><a href="#">test linkss</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
<li class="w-100"><a href="#">test link</a></li>
</ul>
</ul>
thanks
Aucun commentaire:
Enregistrer un commentaire