On Mon, Mar 5, 2012 at 12:30 PM, 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?
Michael
---
Assuming you mean the list items are not the same width, this will
provide a centered horizontal nav bar.
CSS:
nav{display:block;width:100%}
nav ul{margin:0;padding:3px 0;text-align:center;border:1px solid #ccc}
nav li{font:100% Palatino,'Palatino Linotype',Times,'Times New
Roman',serif;display:inline;text-transform:uppercase;}
nav li a,
nav ul li b{background:#fff;color:#555;display:inline-block;margin:0
2px;padding:.75em 1%;text-decoration:none;/*max-width:97%*/}
nav ul li b{background:lime;}
nav li a:hover,nav li a:focus,nav li a:active{background:blue}
html:
<nav>
<ul>
<li><b>Item One</b></li>
<li><a href="#nowhere">Item Two</a></li>
<li><a href="#nowhere">Item Three</a></li>
<li><a href="#nowhere">Item Four</a></li>
<li><a href="#nowhere">Item Five</a></li>
</ul>
</nav>
Best,
~d
--
Chelsea Creek Studio
http://ccstudi.com
______________________________________________________________________
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/
