CSS+div怎么做图片中的导航条

css+div做图片中的导航条的方法：

思路：对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排，从而让li并排布局。然后需要对ul li里的a标签设置display:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。

1、CSS代码：

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} 

ul#nav li{display:inline; height:60px} 

ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
 color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px} 

ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/ 

2、HTML代码

3、效果截图

等等，帮你写个打包传上来！

已经传了，关键是：

p 必须浮动 > float:left;

因为 p 浮动后宽度自动计算才能生效 > width:auto;

p 宽度 auto 后，里面文字变多或变少就可以自动算出宽度。

等等，帮你写个打包传上来！

已经传了，关键是：