On Tue, Mar 6, 2012 at 1:30 AM, Michael Beaudoin <[email protected]> wrote:
> I have a list that makes a horizontal menu. How would it be best to evenly
> distribute the menu items horizontally as not all the menus are the same
> width?
I'd say the *best* way would be to use CSS tables, but then you'd lose
support for IE7.
So, the next best solution is to specify a width for the list items.
It could depend on the how big your menu area is, how many menu items you have,
how long the menu names themselves are, and how your menu area is sized (fixed
width, pixels, ems, etc), but you can probably use percentages.
This might be a good start:
<nav class="menu">
<ul class="menu_list">
<li class="menu_item">
<a class="menu_link" href="#somewhere">menu item</a>
</li>
<li class="menu_item">
<a class="menu_link" href="#somewhere">menu item</a>
</li>
<li class="menu_item">
<a class="menu_link" href="#somewhere">menu item</a>
</li>
<li class="menu_item">
<a class="menu_link" href="#somewhere">menu item</a>
</li>
<li class="menu_item">
<a class="menu_link" href="#somewhere">menu item</a>
</li>
</ul>
</nav>
nav.menu, ul.menu_list {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
li.menu_item {
width: 20%;
}
a.menu_link {
display: block;
text-align: center;
max-width: 100%;
}
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
> Thanks,
> Michael
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
