利用ul li 标签实现table表格的效果 （li内容超出ul设定的宽度时不换行）
文章来源：365jz.com 点击数：3084 更新时间：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 新增的值）
相关知识引自：https://www.365jz.com
爱情是两个人的“饰”！！
欢迎光临我的小店：http://shop36465575.taobao.com/
查看了很多的知识，最终用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 新增的值）
相关知识引自：https://www.365jz.com
爱情是两个人的“饰”！！欢迎光临我的小店：http://shop36465575.taobao.com/
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
- 上一篇：IE6不支持position:fixed的bug
- 下一篇：html的学习小结（1）
