I forgot... add list-style: none to either the ul or the li ... you probably already knew that, though
On Tue, Mar 6, 2012 at 11:33 AM, Ghodmode <[email protected]> wrote: > 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/
