css中li使用技巧示例

发布时间:2019-07-27编辑:脚本学堂
分享一些css中li列表项的使用示例,学习下li使用的相关技巧,感兴趣的朋友参考下吧。

本节内容:
css中li的使用技巧

例1,控制一行拥有几条LI的方法。
 

复制代码 代码示例:
.rep {  
         width:680px;  
         float:left;  
         list-style-type:none;  
         overflow:hidden;  
         padding:0;  
          margin-left:0;  
}  
 
.rep li{  
         width:165px;  
         margin-left:2px;  
         float:left;  
         overflow:hidden;   
         text-align:center;  

 

例2,当LI设置了长度,当字数超宽时,隐藏多余的字。
 

复制代码 代码示例:
<style type="text/css">    
<!--    
li {    
    width:200px;    
    white-space:nowrap;    
    text-overflow:ellipsis;    
    overflow: hidden;    
    }    
-->    
</style>