思洋互动网站建设学前班

修改层的宽度控制列表宽度（1）

修改层的宽度控制列表宽度的原理为：可以把所有列表项所在的层设置为长度相同。这样截取出来的列表项宽度就一致了。这种解决方式与字符宽度无关，所以字符宽度不同不会影响到列表项的宽度。

先创建列表，列表的创建需使用DIV，步骤如下。

（1）在页面头部添加下面的样式定义代码：

1. 1<style type="text/CSS"> 
2. 2        .list  
3. 3      {  
4. 4            font-size:14px;  
5. 5            width:150px;  
6. 6        }  
7. 7        .subone  
8. 8        {  
9. 9            float:left;  
10. 10            overflow:hidden;  
11. 11        }  
12. 12        .subtwo  
13. 13        {  
14. 14            float:left;  
15. 15            color:Blue;  
16. 16        }  
17. 17</style> 

上面的样式定义代码中.list是一个完整列表项所在的层的样式定义，.subone和.subtwo分别是列表项中第一部分和第二部分所在层的样式定义。

（2）下面的代码利用DIV标记创建列表：

1. 1<div> 
2. 2        <div class="list"> 
3. 3            <div class="subone"> jQuery 是一个 JavaScript 库。</div> 
4. 4            <div class="subtwo">&nbsp;简介</div> 
5. 5        </div> 
6. 6        <div class="list"> 
7. 7            <div class="subone"> jQuery 极大地简化了 JavaScript 编程。</div> 
8. 8            <div class="subtwo">&nbsp;简介</div> 
9. 9        </div> 
10. 10        <div class="list"> 
11. 11            <div class="subone"> jQuery 很容易学习。</div> 
12. 12            <div class="subtwo">&nbsp;简介</div> 
13. 13        </div> 
14. 14        <div class="list"> 
15. 15            <div class="subone"> jQuery 拥有供 AJAX 开发的丰富函数（方法）库。   
16.               </div> 
17. 16            <div class="subtwo">&nbsp;简介</div> 
18. 17        </div> 
19. 18 </div> 

 

如图4.3所示是列表的实际效果。

对于这种形式的列表，需要使用jQuery来修改层的宽度。要实现控制列表项长度的效果，需要用到的函数有：jQuery的ready()、each()、width()和css()函数。

1．jQuery的width()函数--元素宽度

该函数取得或者设置匹配元素当前计算的宽度值（px）。其语法形式如下：

 

1. 语法一   width()  
2. 语法二   width(val) 

 

图4.3  使用DIV创建的参差不齐的列表

注：第一种语法形式表示取得第一个匹配元素当前计算的宽度值。第二种语法形式表示设置每个匹配元素当前计算的宽度值，val为宽度值的参数。