Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Fixed with horizontal menu, with variable width tabs, using ul

Tags:

css

menu

I have a horizontal menu. The markup looks like this:

<ul class="menu">
   <li>Item 1</li>
   <li>Longer Item 2</li>
   <li>Item 3</li>
</ul>

Submenus and suckerfish dropdowns will come later.

The ul needs to span the width of the page (e.g. 100% or 1000px).

The lis should vary in width based on their content.

So the result would look like this:

-----------------100% of page------------
|--Item 1--|--Longer item 2--|--Item 3--|

Now it is easy to do this by fixing a width for each li tag, but because the menu will be CMS driven I need to allow the width of the tabs to vary automatically. With a table this would be trivial, but I can't think of a way to do it with a ul.

like image 313
cbp Avatar asked Dec 07 '09 10:12

cbp


1 Answers

This is a case for

Display:Table-Man

ul {
  display: table;
  width: 100%;
  table-layout: fixed;
}
li {
  display: table-cell;
}

Unfortunately, you should abandon the thought of supporting IEs 6 and 7, but else this is the way to go (or switching to HTML tables, which might or might not be so far away from the semantic content of the markup).

like image 125
Boldewyn Avatar answered Oct 16 '22 07:10

Boldewyn