我只有一个< 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%;
}
