ul li 横向排列不换行的做法

　2012-05-31 07:31:07　来源：WEB开发网　　　

核心提示：有些时候需要使用ul li 水平排列而不要换行，做法很简单，ul li 横向排列不换行的做法，直接拷我的代码上来，注意红色部分就可以了：#canvaslist{ list-style:none; overflow: auto; margin:0; padding:0; borde

有些时候需要使用ul li 水平排列而不要换行，做法很简单，直接拷我的代码上来，注意红色部分就可以了：

#canvaslist{ 
    list-style:none; 
    overflow: auto; 
    margin:0; 
    padding:0; 
    border:1px solid red; 
    zoom:1; 
    white-space: nowrap;      width: 100%; 
} 
#canvaslist li{ 
    line-height:20px; 
    margin:5px 4px; 
    border:1px solid silver; 
    text-align:center; 
    display: inline; 
}

关键部分只有红色部分。
另外一个地方，在li部分，我刚开始加入了float : left ，之后就没有不换行的效果，去掉就可以了。不知道原因。