Html 如何像表格一样设计我的无序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13824918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style my unordered list like a table?
提问by user584018
I have ONLY one <UL>and under that we have group of <LI>
我只有一个<UL>，下面我们有一组<LI>
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
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....
现在我想将它们显示为表格，请帮助我使用 CSS，我们如何以下表格式显示高于 UL/LI 的表格，在一个 TR（两个 TD）中设置 2 个 LI，等等....
回答by raina77ow
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;
}
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. )
它有效（JSFiddle；在 Chrome、Firefox 和 Opera 中测试；nth-child(even)选择器在 IE8 中显然失败，所以你必须用类或其他方式模拟它；否则它仍然是可靠的），但我承认我对此感到内疚。)
P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:
PS如果你想为“单元格”内容添加填充，不要忘记改变它们的宽度，就像这里：
li {
width: 47%;
padding-right: 1%;
}
回答by cimmanon
You cannot convert a single list (containing more than 2 items) into 2 columns via the display: tableproperties because you need some element to act as the table-row. Without an element acting as a table-row, all adjacent elements that are set to display: table-cellwill be contained within an anonymous table-row element that cannot be modified or styled in any way.
您不能通过display: table属性将单个列表（包含 2 个以上的项目）转换为 2 列，因为您需要一些元素作为表格行。如果没有元素充当表格行，所有设置为的相邻元素都display: table-cell将包含在匿名表格行元素中，该元素无法以任何方式修改或设置样式。
Your only option is to either change the markup (to use tables or lists of lists) or use a different approach to your CSS: either floats/inline-block on the lis or using the columnsproperty on the ul.
你唯一的选择是要么改变标记（在使用表格或列表的列表），或者使用不同的方法来你的CSS：在任一彩车/ inline-block的liS或使用columns的财产ul。
回答by Luca Reghellin
It's a really late answer, but I think this is a common topic. Here's a codepen I made.
这是一个非常晚的答案，但我认为这是一个常见的话题。这是我制作的代码笔。
Obviously it's just a starting point. It also has some example of how to add styles like bg or borders. If the 'cells' contain some arbitrary content, you'll have to adjust dimensions, for example. I use this kind of code for thumbnails galleries, for example, where you don't have to worry about borders or bgs and it's quite elementary code (the example is for a 2x3 table, see codepen):
显然，这只是一个起点。它还有一些关于如何添加 bg 或边框等样式的示例。例如，如果“单元格”包含一些任意内容，则您必须调整尺寸。我将这种代码用于缩略图画廊，例如，您不必担心边框或 bgs 并且它是非常基本的代码（该示例适用于 2x3 表，请参阅 codepen）：
ul{
list-style:none;
}
ul li{
float:left;
padding:10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
ul li:nth-child(3n){
background-color:#888;
}
ul li:nth-child(3n+1){
clear:both;
border-left:1px solid #000;
background-color:#ccc;
}
ul li:nth-child(-n+3){
border-top:1px solid #000;
}
Hope it helps.
希望能帮助到你。
