大佬教程收集整理的这篇文章主要介绍了HTML – 如何像桌子一样设置无序列表的样式?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<ul> <li>1<li> <li>2<li> <li>3</li> <li>4<li> </ul>
现在我想把它们显示为TABLE,请用CSS帮助我,我们如何在下表格式中显示上述UL / LI的表格,2个LI设置在一个TR(两个TD)中等等….
ul { width: 450px; /* change it to whatever you like */ position: relative; /* these should be probably already set up by `reset.css` */ list-style-type: none; margin: 0; padding: 0; } ul:before,ul:after { text-align: center; display: block; border: 1px solid black; border-bottom: 0; width: 48%; } ul:before { content: 'col1'; border-right: 0; } ul:after { content: 'col2'; position: absolute; top: 0; left: 48%; margin-left: 1px; } li { text-align: right; width: 48%; float: left; border: 1px solid black; margin-bottom: -1px; } li:nth-child(even) { margin-left: -1px; }
它可以工作(JSFiddle;在Chrome,Firefox和Opera中测试; nth-child(偶数)选择器在IE8中明显失败,所以你必须用类或其他方式模拟它;但是否则它仍然很稳定),但我承认我感到内疚对这个. )
附:如果要为“单元格”内容添加填充,请不要忘记更改其宽度,如here:
li { width: 47%; padding-right: 1%; }
以上是大佬教程为你收集整理的HTML – 如何像桌子一样设置无序列表的样式?全部内容,希望文章能够帮你解决HTML – 如何像桌子一样设置无序列表的样式?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。