Meow Meow - 19 days ago 9
CSS Question

Auto-width list of links without use of <ul>

I'm trying to create a list of links for a menu, and I want to explore not using

ul
or
ol
, but I find that my approach sizes the
a
elements to be full-width, rather than how
li
children would normally be auto-width.

For example:

nav {
display: flex;
flex-direction: column;
}


<nav>
<a>One</a><!-- these <a> children end up being full-width -->
<a>Two</a>
<a>Tree</a>
</nav>

Answer
nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* NEW */
}

The default setting is align-items: stretch, which means flex items will expand the full width of the container.

Comments