Inline list - what approaches are available to make items equal to width of largest?

Question

I'm creating a horizontal tab menu.

Because the tabs are responsive, I need to apply some rules:

The maximum width of a tab is 264px

A tab width is the width of the text + 24px left and right;

However (here's the tricky bit), all tabs must be of equal size;

If the total width of the tabbed area is less than the width available (the page container), all tabs are made equal to the largest width and centered within the space.

If the total width is equal to or exceeds the width available (for instance mobile), tabs will be set to a fixed width (for instance 3 tabs = 33.33%) and the text will wrap where necessary.

I'm trying to think of the best solution to this problem.

• I'm guessing that a table based solution will work, however never used tables in anger, I'm not entirely sure.(if anyone has any advice on this, it would be appreciated)

• A javascript solution?

• Flexbox isn't really a viable solution as its not widely enough supported.

• Are there any other css methods that I can make all tabs equal width?

All help advice appreciated.

Answer 1

you'll agree that important thing here is greed, so there is easy solution for navs and tabs its with float.

 ul{ list-style: none; } li{ width: 100%; } @media only screen and (min-width: 768px) { li{ float: left; //other styles for tabs } } 

 <ul> <li>1<li> <li>2<li> <li>3<li> <li>4<li> <li>5<li> </ul>