HTML – 如何像桌子一样设置无序列表的样式？

概述我只有一个< UL>并且在那之下我们有< LI>组了. <ul> <li>1<li> <li>2<li> <li>3</li> <li>4<li> </ul> 现在我想把它们显示为TABLE,请用CSS帮助我,我们如何在下表格式中显示上述UL / LI的表格,2个LI设置在一个TR(两个TD)中等等…. 嗯,这是一个可能的解决方案： ul { width: 4 我只有一个< ul>并且在那之下我们有< li>组了.

<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 – 如何像桌子一样设置无序列表的样式？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。