WEB开发网
开发学院网页设计DivCss ul li 横向排列不换行的做法 阅读

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 ,之后就没有不换行的效果,去掉就可以了。不知道原因。 

Tags:ul li 横向

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接