Search code examples
htmlcsslayoutwidthcentering

centering unknown width elements inside a known width element

I didn't find a solution for this problem:

For a nav bar, I have a ul with a specific width (530px), and inside it a few lis.

I want the lis to fill all the 530px width, with equal spaces between them. I can't hard-code this, as I don't know the width of each li.

Solution

  • I'd recommend Flexbox - the updated spec is fairly new, and you'll want to use a polyfill or vendor prefixes for broad browser support, but it's the direction this kind of task is going.

    Here's a nice tutorial on creating a simple Flexbox-driven horizontal nav that will show you the basics.

    As you can see, the browser support isn't yet perfect, but there are various polyfills and techniques available to you to make it rock solid. And you don't have to go far to find some more info about those resources. The key link from that related SO post is Chris Coyier's Using Flexbox.