auto columns to have each LI of UL justified on a single line

Question

I have an unordered list with a number of list elements. I don't know the exact number of li elements in said ul -- e.g., it could either be 3 or 4 elements (all very concise ones) -- but I display each li as a block (not as an actual list), and want to use the columns feature to set it all on one line, equally centred / justified.

However, if I do columns: 4, and only have 3 elements, then they're displayed as if a fourth element is missing. Is there a way for them to be displayed as if columns: 3 has been specified? (I've tried setting columns to auto, but it didn't seem to do anything in the browser I tested.)

Basically, I want the columns CSS property of ul to be set to the number of li children that the ul has, in CSS.

Answer 1

By changing the display property of li element,you can make this (3 or 4 lis) center aligned of your window.

ul#registrar {
    text-align: center;
}
ul#registrar li {
    display: inline-block;
}

<ul id="registrar">
<li><a href="/reg.com">reg.com</a></li>
<li><a href="/reg.ru">reg.ru</a></li>
<li><a href="/nic.ru">nic.ru</a></li><li><a href="/nic.ru">nic.ru</a></li>
</ul>