Question

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

字可能不止四个，那么怎么让导航条的红色随着字体数量变化呢？

Answer 1

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、效果截图

Answer 2

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

已经传了，关键是：

<div>

<p><span>公司介绍</span></p>

</div>

p 必须浮动 > float:left;

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

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

Answer 3

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

已经传了，关键是：

<div>
<p><span>公司介绍</span></p>

</div>

p 必须浮动 > float:left;
因为 p 浮动后宽度自动计算才能生效 > width:auto;
p 宽度 auto 后，里面文字变多或变少就可以自动算出宽度。