嗯,这是一个可能的解决方案:
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%;
}