您现在的位置: 365建站网 > 365学习 > 利用ul li 标签实现table表格的效果 (li内容超出ul设定的宽度时不换行)

利用ul li 标签实现table表格的效果 (li内容超出ul设定的宽度时不换行)

文章来源:365jz.com     点击数:2701    更新时间:2009-09-18 10:18   参与评论
今天在项目中要实现动态的生成一行按钮,并且这行按钮不要换行。
查看了很多的知识,最终用ul li解决了问题。
贴出来大家学习:
ul{white-space:nowrap; overflow:auto; height:100px; width:200px;}
li{display:inline-table; border: solid 1px black; height:80%;}
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
这段代码中起主要作用的是: ul:  white-space:nowrap;  以及  li: display:inline-table; (也可以使用:display:inline; 或者display:inline-block;)
inline: 此元素会被显示为内联元素,元素前后没有换行符。
inline-table: 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
inline-block: 行内块元素。(CSS2.1 新增的值)
相关知识引自:http://www.365jz.com

  爱情是两个人的“饰”!!
欢迎光临我的小店:http://shop36465575.taobao.com/


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (2701人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------