如何将我的无序列表设置为表格样式? [英] How to style my unordered list like a table?
问题描述
我只有一个<UL>
,在此之下,我们有一组<LI>
I have ONLY one <UL>
and under that we have group of <LI>
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
现在我想将它们显示为TABLE,请为我提供CSS帮助,如何在UL/LI上方以下表格式显示表格,在一个TR(两个TD)中设置2 LI等等. ..
now I wanted to show them as TABLE, please help me with CSS, how can we show as a TABLE for above UL/LI in below table format, 2 LI set in one TR (two TD) and so on....
推荐答案
嗯,这是一种可能的解决方案:
Well, here's one possible solution:
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(even)
选择器显然失败了在IE8中,因此您必须使用类或其他方式来模仿它;但除此之外,它仍然是可靠的),但我承认对此感到内gui. )
It works (JSFiddle; tested in Chrome, Firefox and Opera; nth-child(even)
selector obviously fails in IE8, so you have to emulate it with class or other means; but otherwise it's still solid), but I admit I feel guilty about this. )
P.S.如果您想在单元格"内容中添加填充,请不要忘记更改其宽度,例如此处:
P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:
li {
width: 47%;
padding-right: 1%;
}
这篇关于如何将我的无序列表设置为表格样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!