Template:Hlist/styles.css

/* flex + flex-wrap, not display:inline -- confirmed live that plain
   inline <li>s with no whitespace text node between them (the dot's
   spacing comes from CSS margin now, not a literal space -- see
   _gen_hlist.py) never got a line-break opportunity between items at
   all, so a long list just overflowed its cell/table width instead of
   wrapping (this was the direct cause of a table needing horizontal
   scroll to show a 6-name row). Flex items wrap regardless of markup
   whitespace, so this fixes it without bringing the space-collapsing
   problem back. */
.loka-hlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.loka-hlist-sep {
	margin: 0 .3em;
}

/* Hides the separator dot (and its margins) on whichever item ends up
   first (the dot itself lives in the template's own HTML output, not
   here -- see the comment in _gen_hlist.py for why). */
.loka-hlist li:first-child .loka-hlist-sep {
	display: none;
}

.loka-hlist--stacked {
	flex-direction: column;
}

.loka-hlist--stacked .loka-hlist-sep {
	display: none;
}