Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping?
I have tried adjusting margins, but is there a more elegant solution to this issue?
The requirement is to maintain the bullets
Text within list items should not wrap around the bullets
This is how I am currently approaching it:
body > ul {
background: #aaa;
display: flex;
flex-wrap: wrap;
}
body > ul > li {
flex-grow: 1;
width: 33%;
height: 100px;
}
body > ul > li:nth-child(even) {
background: #23a;
}
body > ul > li:nth-child(odd) {
background: #49b;
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>