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

it2026-05-19  9

今天在项目中要实现动态的生成一行按钮,并且这行按钮不要换行。 查看了很多的知识,最终用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.w3school.com.cn   爱情是两个人的“饰”!!欢迎光临我的小店:http://shop36465575.taobao.com/

转载于:https://www.cnblogs.com/lfzwenzhu/archive/2009/08/25/1553964.html

最新回复(0)