2

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.

cnst
  • 25,870
  • 6
  • 90
  • 122

1 Answers1

0

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>
Athul Nath
  • 2,536
  • 1
  • 15
  • 27
  • I see; looks like `inline-block`, together with https://stackoverflow.com/a/12198561/1122270, should do the trick. (But by itself your code doesn't work as expected — as I want each `li` to be evenly spaced.) – cnst Sep 11 '17 at 19:00
  • So have you tried inline-block with [above mentioned link](https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has/12198561#12198561) ? – Athul Nath Sep 12 '17 at 04:51