Horizontally growing lists, inter-element separators, no pre-element bullets, no vertical alignment. How?

Question

If you check out a navigation box at the bottom of a Wikipedia article (here's an example), you'll notice they do something distinctive with their lists:

Lists grow horizontally, but wrap vertically when hitting the end of their containing element.
Bullets go between elements, not before elements.
Lists elements are not forced into columns (they don't have to align vertically).

I like the way these lists look, but I'm having a hard time finding ways to exactly replicate them. I can find similar solutions to put list elements into columns or just have horizontal growth without inter-element separators. I've used my browser's code inspector to look at the html for the wikipedia navs, but the style sheets get a bit crazy.

score 0 · Answer 1 · answered Aug 07 '20 at 05:56

I was able to dig up the style sheet for the hlist class here. Works like a charm. I'll provide an example. Credit to wiki user Edokter for coming up with this style.

header, footer {
  text-align: center;
}

/*Grow horizontally, don't put bullet marks.*/
ul.hlist li {
  display: inline;
}

/* Put a bullet after every element.*/
ul.hlist li:after {
  content: " • "
}

/*Unless it's the last element.  Then put nothing.*/
ul.hlist li:last-child:after {
  content: none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <header>
  <h1>
  Full Name
  </h1>
  <ul class="hlist">
    <li>
    email@address.com
    </li>
    <li>
    123-456-7890
    </li>
    <li>
    personal-website.com
    </li>
  </ul>
  </header>
  <p>
  Pretend this is lorem ipsum.
  Just a ton of lorem ipsum.
  Going on for several lines.
  Just total nonsense.
  Nonsense a million times.
  Not meant to be read at all.
  Just a bunch of vaguely Latin sounds
  all garbled together.
  </p>
  <footer>
  <ul class="hlist">
    <li>
      Pretend
    </li>
    <li>
      These
    </li>
    <li>
      Are
    </li>
    <li>
      Nav
    </li>
    <li>
      Options
    </li>
    <li>
      Or Something
    </li>
  </ul>
  </footer>
  </body>
</html>

Horizontally growing lists, inter-element separators, no pre-element bullets, no vertical alignment. How?

1 Answers1