字可能不止四个，那么怎么让导航条的红色随着字体数量变化呢？
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代码
<ul id="nav">
<li><a href="http://www.xxx.com/">首页</a></li>
<li><a href="http://www.xxx.com/html/">HTML教程</a></li>
<li><a href="http://www.xxx.com/rumen/">CSS基础</a></li>
<li><a href="http://www.xxx.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.xxx.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.xxx.com/wenji/">CSS问题</a></li>
</ul>
3、效果截图
等等，帮你写个打包传上来！
已经传了，关键是：
<div>
<p><span>公司介绍</span></p>
</div>
p 必须浮动 > float:left;
因为 p 浮动后宽度自动计算才能生效 > width:auto;
p 宽度 auto 后，里面文字变多或变少就可以自动算出宽度。
已经传了，关键是：
<div>
<p><span>公司介绍</span></p>
</div>
p 必须浮动 > float:left;
因为 p 浮动后宽度自动计算才能生效 > width:auto;
p 宽度 auto 后，里面文字变多或变少就可以自动算出宽度。
