html中ul元素水平排列问题
2015-11-14 23:03
543 查看
<!DOCTYPE html> <html> <head> <style> #pic_list { display:block; white-space:nowrap; width:500px; overflow:auto; } #pic_list li { width:80px; height:80px; margin:3px; background:red; display:inline-block; } </style> </head> <div id="pic_list"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>关键是对ul元素设置display:block;white-space:nowrap;
对li元素的宽度和高度进行设置,当设置百分比的时候可以达到均分的目的
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- li中插入img图片间有空隙的解决方案
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签
- 多浏览器下IE6 IE7 firefox li 间距问题第1/2页
- asp中实现清除html的函数
- css创意ul+li实现的细线表格实现代码