I am trying to create 2 columns using li and want to add borders to each of them. However, I'm facing an issue where there are double borders for 2 li. This is the code snippet I have tried:
.ul1 {
column-count: 2;
column-gap: 0px;
}
.li1 {
border: 1px solid blue;
} <ul class="ul1">
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
</ul>After trying out the above code, I found a solution using the child selector:
HTML File
<ul class="ul1">
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
<li class="li1">Test</li>
</ul>
CSS File
.ul1 {
column-count: 2;
column-gap: 0px;
}
.li1 {
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
margin-right: -1px;
&:nth-child(5) {
border-bottom: 1px solid blue;
}
&:nth-child(10) {
border-bottom: 1px solid blue;
}
}
However, I'm unsure if this approach is considered good practice or if there could be a better way to achieve the desired outcome. Any guidance and suggestions on how to improve this would be highly appreciated.