今天小编跟大家讲解下有关css 等宽导航栏设计技巧 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css 等宽导航栏设计技巧 的相关资料，希望小伙伴们看了有所帮助。
等宽导航栏(我不知道这个名称合不合适，知道的朋友指点一下)的设计一般要遵守以下两个要素： 1.导航栏的背景和页面的最大宽度相等； 2.导航的内容的位置在页面主框架以内（导航的内容在主框架以外的话不好看，用户体验也不好）。 文字看不懂的话，可以看下面这幅草图。 先看看导航栏的HTML代码。 复制代码代码如下: <div id="navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">links</a></li> <li><a href="">FAQs</a></li> <li><a href="">Contact</a></li> <li><a href="">Guestbook</a></li> </ul> </div> 从这里看出结构和一般的导航栏是完全一样的，知道的朋友应该猜出了，真正起作用的是CSS。 CSS这样写。 复制代码代码如下: #navigation { width: 100%; float: left; margin: 0 0 1px 0; padding: 0; background-color: #F7F7F7; } #navigation ul { list-style: none; width: 800px; margin: 0 auto; padding: 0; } #navigation li { float: left; } #navigation li a { display: block; padding: 8px 15px; text-decoration: none; } CSS的关键我已经加上了注释。来源：爱蒂网
