My list consists of 8 items, formatted as follows:
<ul>
<li>List Item 01</li>
<li>List Item 02</li>
<li>List Item 03</li>
<li>List Item 04</li>
<li>List Item 05</li>
<li>List Item 06</li>
<li>List Item 07</li>
<li>List Item 08</li>
</ul>
In this list, I am looking to maintain a fixed width space between item 04 and 05. The first four items should be aligned to the right of that space, while the last four should be aligned to the left, similar to the image I have provided below.
https://i.sstatic.net/UQTzQ.png
I attempted a solution using the following code snippet:
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
ul li:nth-child(4) {
margin-right: 10em;
}
Although it appears to work, there is an issue when the list contains 4 or 6 items as they should be grouped in 2s or 3s respectively.
If anyone has a CSS-only solution for this problem, I would greatly appreciate your input.
Thank you.